Curso HTML 5. Enlaces y navegación

Enlaces y navegación en HTML5

Los enlaces (<a>) y la navegación son la columna vertebral de la experiencia web. Permiten conectar diferentes documentos, secciones dentro de una misma página y recursos externos como correos electrónicos o descargas. HTML5 introduce además el elemento semántico <nav> para agrupar menús de navegación y mejorar la accesibilidad.

1. El elemento <a> básico

El elemento <a> crea un hipervínculo. Su atributo fundamental es href, que puede apuntar a:

URLs absolutas: https:// o http://.
URLs relativas: rutas dentro del mismo sitio.
Anchors internos: #id-de-seccion.
Protocolos especiales: mailto:, tel:, etc.


Visitar Ejemplo


Ir a Introducción


Contáctanos por correo


Llámanos

2. Atributos comunes del <a>

Atributo	Descripción	Ejemplo
`href`	Especifica la URL o recurso de destino.	`href='pagina.html'`
`target`	Define dónde se abre el enlace (`_self`, `_blank`, `_parent`, `_top`).	`target='_blank'`
`rel`	Relaciona el documento actual con el destino (`nofollow`, `noopener`, `noreferrer`).	`rel='noopener noreferrer'`
`download`	Indica que el recurso se debe descargar en lugar de abrirse.	`download='archivo.pdf'`
`hreflang`	Idioma del recurso destino (ej. `en`, `es`).	`hreflang='es'`
`type`	Tipo MIME o formato esperado del recurso.	`type='application/pdf'`
`media`	Medios de destino (impresión, pantalla, etc.).	`media='print'`

3. Enlaces de descarga

Para ofrecer la descarga directa de un archivo se usa el atributo download. Si se especifica un valor, será el nombre de archivo sugerido.



  Descargar Guía en PDF

4. Anchors y navegación interna

Las referencias internas permiten saltar a secciones específicas. Basta con asignar un id y un enlace con #id.

Capítulo 2: Fundamentos

Contenido del capítulo 2...

Ir al Capítulo 2

5. El elemento semántico <nav>

HTML5 introduce <nav> para agrupar menús principales de navegación. Mejora la estructura semántica y la accesibilidad.


  
    Inicio
    Servicios
    Portafolio
    Contacto

6. Navegación compleja: breadcrumbs y menús anidados

Para indicar la ruta de navegación (migas de pan) se suelen usar listas anidadas:


  
    Inicio
    Categoría
    Subcategoría
    Producto

7. Consideraciones de accesibilidad

Usar siempre texto descriptivo en el contenido del enlace: “Haz clic aquí” no aporta contexto.
Añadir aria-label cuando el texto visual no sea suficiente.
Marcar el enlace actual con aria-current='page' o clases CSS.
Garantizar contraste y foco visible para usuarios con teclado (:focus).

8. Organización de menús responsivos

Si bien la parte visual se gestiona con CSS/JavaScript, la estructura HTML debe ser clara:


  
  
    Inicio
    Blog
    Acerca
    Contacto

9. Buenas prácticas

Prefiere rutas relativas para facilitar despliegues en distintos entornos.
Añade rel='noopener noreferrer' cuando uses target='_blank' para mejorar seguridad.
Valida siempre que el elemento <nav> contenga enlaces principales y no todo lo que sea link.
Mantén textos concisos y descriptivos para usuarios y motores de búsqueda.

Con estos fundamentos, dominarás la creación de enlaces y menús de navegación accesibles y semánticos en HTML5. Experimenta combinando rutas internas, externas, descargas y protocolos especiales para ofrecer una experiencia de usuario completa.