Curso HTML 5.1 Etiqueta a y atributo href

Etiqueta a: definición y propósito

La etiqueta <a> (anchor) se utiliza principalmente para crear hiperenlaces en HTML. Permite enlazar a documentos, secciones internas, direcciones de correo, archivos descargables y otros recursos. Su uso básico requiere el atributo href, que especifica la URL o destino del enlace.

Elementos fundamentales

Etiqueta: <a> (elemento en línea)
Contenido: Texto o elementos HTML anidados (imágenes, íconos…)
Atributo esencial: href

Atributo href

El atributo href define el destino del hiperenlace. Su valor puede ser:

URL absoluta (incluye protocolo).
Ruta relativa dentro del mismo servidor o proyecto.
Fragmento (ancla interna, referencia a un id).
Esquemas especiales (mailto:, tel:, ftp:, etc.).

Tipos de URL en href

Tipo	Ejemplo de valor	Descripción
Absoluta	https://www.ejemplo.com/pagina.html	Incluye protocolo y dominio completo.
Relativa	docs/manual.pdf	Ruta respecto a la ubicación del HTML actual.
Fragmento	#seccion2	Salto a un elemento con `id='seccion2'`.
mailto	mailto:usuario@dominio.com	Abrir cliente de correo con destinatario predefinido.
tel	tel:+34123456789	Iniciar llamada en dispositivos compatibles.

Atributos adicionales de `<a>`

target: dónde abrir el enlace (_blank, _self, _parent, _top).
rel: relación con el recurso vinculado (nofollow, noreferrer, noopener).
download: sugiere la descarga del recurso en lugar de la navegación.
hreflang: especifica el lenguaje del recurso vinculado.
type: indica el tipo MIME del destino (por ejemplo, application/pdf).
ping: URL para enviar notificaciones de seguimiento.

Buenas prácticas y accesibilidad

Texto de enlace descriptivo (“Clica aquí” no es adecuado; mejor “Descargar informe anual”).
Usar title o aria-label para aclarar destino si el texto no es suficiente.
Para enlaces que abren en nueva pestaña, usar target='_blank' y rel='noopener noreferrer'.
Validar que href no esté vacío; de lo contrario, el enlace no es navegable.

Ejemplos detallados

1. Enlace absoluto a sitio externo



  Visitar Google

2. Enlace relativo dentro del sitio




  Página de Contacto

3. Fragmento a sección interna

Nuestros Servicios

...

Ir a Servicios

4. Enlace de correo electrónico



  Enviar correo a Soporte

5. Enlace de llamada telefónica



  Llamar al +34 123 456 789

6. Descarga de archivo



  Descargar Guía de Usuario

7. Enlace con hreflang y type



  Manual (ES)

SEO y rendimiento

Usar texto relevante con palabras clave.
Evitar enlaces rotos (404) y validar periódicamente.
Minimizar redirecciones para mejorar velocidad.
Si el enlace es de pago o patrocinado, usar rel='sponsored'.

Resumen de atributos principales

Atributo	Función	Valores comunes
href	URL o destino del enlace	https://…, /ruta, #id, mailto:, tel:
target	Dónde abrir el enlace	_self, _blank, _parent, _top
rel	Relación con el recurso	noopener, noreferrer, nofollow, sponsored
download	Forzar descarga	nombre-archivo.ext (opcional)
hreflang	Lenguaje del recurso	es, en, fr, de
type	Tipo MIME esperado	application/pdf, image/png

Con esta información y ejemplos, tienes una visión completa de la etiqueta <a> y su atributo href en HTML 5.1. Experimenta combinando los distintos atributos para enriquecer la navegación, mejorar la accesibilidad y optimizar el SEO de tu sitio web.