Etiqueta nav en HTML: navegación y menús de enlaces
La etiqueta <nav> representa una sección con enlaces de navegación relevantes dentro de un sitio o del propio documento. Úsala para el menú principal de un curso o el índice de una lección: permite reconocer ese bloque como navegación y encontrar sus destinos sin recorrer todo el contenido.
Ejemplo mínimo de nav
<nav aria-label="Principal">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/manual-html.html">Manual de HTML</a></li>
</ul>
</nav>El resultado visible es una lista con dos enlaces. Además, forman una región de navegación con el nombre accesible «Principal». Ese nombre no aparece como título en pantalla. Las direcciones corresponden a páginas de este sitio; si reutilizas el fragmento dentro del <body> de tu proyecto, cambia los destinos por los que existan en él.
<nav> no coloca los enlaces en una barra horizontal ni crea un menú desplegable. La lista aporta viñetas y los enlaces conservan su comportamiento habitual; cualquier distribución adicional depende de CSS.
Sintaxis y contexto válido
Escribe apertura y cierre: <nav>...</nav>. Ninguna de sus etiquetas puede omitirse. Es contenido de flujo y de sección, y admite contenido de flujo: enlaces, listas, encabezados o párrafos que expliquen los destinos. Puede aparecer, por ejemplo, dentro de <body>, <header> o <main>, respetando las restricciones del contenedor. No lo metas dentro de un <p>, que admite contenido de frase. Estas reglas se recogen en el HTML Living Standard para nav.
El enlace lo crea <a> con href. Poner una dirección en <nav> o escribir solo texto dentro de ella no lo convierte en enlace.
Qué enlaces necesitan nav
Elige el elemento por la función del bloque, no por cuántos enlaces caben en él:
- Menú principal: reúne los destinos importantes para moverse por el sitio; es un uso apropiado.
- Índice local: lleva a apartados de una misma página; también puede ser una navegación relevante.
- Enlace aislado dentro de un párrafo: normalmente forma parte de la explicación y no necesita una región propia.
Tampoco hace falta envolver automáticamente en <nav> cada pequeño grupo del pie de página. El estándar la reserva principalmente para bloques importantes de navegación. Un enlace a las condiciones y otro al aviso legal pueden quedarse en el <footer>.
Varias navegaciones y sus nombres
Puedes tener varias <nav> en un documento. Cuando ofrecen destinos diferentes, dales nombres que permitan distinguirlas: «Principal» e «Índice de la lección», por ejemplo. El patrón de regiones de navegación de WAI explica cómo nombrarlas.
Usa aria-label si no hay un rótulo visible adecuado, o aria-labelledby para referenciar el id de un encabezado visible. No necesitas los dos. Evita nombres como «Navegación de navegación principal»: las tecnologías de asistencia ya reciben el tipo de región. La forma de anunciarla depende del navegador y del lector de pantalla.
Caso práctico: menú principal e índice de una lección
Guarda este documento completo como leccion.html y ábrelo en el navegador. Todos sus destinos están en el propio archivo; no necesita otros recursos, servidor ni JavaScript. La navegación principal ofrece la lección actual y su contacto, y el índice lleva a dos encabezados <h2>.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lección de enlaces</title>
<style>
body {
max-width: 55rem;
margin: auto;
padding: 1rem;
font-family: sans-serif;
line-height: 1.6;
}
a:focus-visible {
outline: 3px solid #0060a8;
outline-offset: 3px;
}
a[aria-current="page"] {
font-weight: bold;
}
</style>
</head>
<body>
<header>
<p>Curso de HTML</p>
<nav aria-label="Principal">
<ul>
<li>
<a href="leccion.html" aria-current="page">
Lección de enlaces (página actual)
</a>
</li>
<li><a href="#contacto">Contacto del curso</a></li>
</ul>
</nav>
</header>
<main>
<h1>Lección de enlaces</h1>
<nav aria-labelledby="indice-leccion">
<h2 id="indice-leccion">Índice de la lección</h2>
<ul>
<li><a href="#crear-enlaces">Crear enlaces</a></li>
<li><a href="#elegir-textos">Elegir textos descriptivos</a></li>
</ul>
</nav>
<section>
<h2 id="crear-enlaces">Crear enlaces</h2>
<p>El atributo href indica el destino de un enlace.</p>
<p>Un fragmento que empieza por # señala un id del documento.</p>
</section>
<section>
<h2 id="elegir-textos">Elegir textos descriptivos</h2>
<p>El texto debe permitir anticipar adónde lleva el enlace.</p>
<p>Escribe el nombre del apartado en lugar de «haz clic aquí».</p>
</section>
</main>
<footer>
<h2 id="contacto">Contacto del curso</h2>
<p>Consulta tus dudas con la persona que imparte el curso.</p>
</footer>
</body>
</html>Para probarlo:
- Pulsa Tab desde el principio. Recorrerás los cuatro enlaces en su orden de aparición; el contorno azul muestra el foco. Shift + Tab permite volver.
- Activa «Crear enlaces» o «Elegir textos descriptivos» con Enter. La URL incorpora su fragmento y el navegador lleva al encabezado correspondiente, desplazándose si hace falta. Tab y Enter funcionan por ser enlaces nativos.
- Activa el enlace de la página actual: vuelve a abrir
leccion.html. El atributoaria-current="page"comunica cuál es la página vigente; no impide seguir el enlace. - Deshabilita JavaScript y repite. La navegación sigue funcionando. No hay desplegables ni botones que dependan de scripts.
Si cambias un id, actualiza el href del índice; una ancla inexistente deja de señalar el apartado. Si sustituyes las dos <nav> por <div>, los enlaces siguen funcionando y pueden verse igual, pero pierdes sus regiones nativas de navegación. Retirar los contenedores conservando su contenido produce la misma pérdida semántica.
Atributos y accesibilidad
<nav> no tiene atributos HTML específicos. Admite globales como id, class y lang. aria-label y aria-labelledby son atributos ARIA para proporcionar un nombre accesible, no opciones exclusivas de esta etiqueta.
Coloca aria-current="page" en el enlace de la página actual. En un conjunto, señala solo la que realmente esté vigente; omite el atributo en los demás. No lo apliques a todos los enlaces de un índice ni esperes que se actualice al desplazarte. ARIA describe el estado, no programa ese comportamiento, como explica la referencia de aria-current.
En el ejemplo, el texto «página actual» comunica también el estado visualmente. La negrita y el contorno los añade CSS. Propiedades como display, y métodos de JavaScript como focus(), no son atributos propios de <nav>.
Errores frecuentes y preguntas
¿Nav debe contener ul? No. Una lista suele expresar bien un conjunto de destinos, pero también puedes incluir enlaces dentro de párrafos. Usa <ul> cuando el orden no sea significativo y <li> para cada elemento de la lista.
¿Puedo tener varias nav? Sí. Distingue las que cumplen funciones diferentes con nombres accesibles, como muestra el ejemplo, y evita crear regiones innecesarias para cada enlace.
¿Un menú de navegación necesita role="menu"? No. En ARIA, menu describe un widget con interacción específica, como movimientos con flechas y gestión del foco. Una navegación corriente usa enlaces y Tab; añadir ese rol no implementa un widget. El ejemplo de navegación de WAI explica esta distinción. Tampoco añadas role="navigation": <nav> ya tiene esa semántica, según ARIA en HTML.
Conserva el foco visible y textos que identifiquen los destinos. Si un enlace no funciona, revisa su href, la existencia de la página y la coincidencia exacta entre fragmento e id.
<main> identifica el contenido principal; <nav> identifica una sección para navegar. <menu> representa una lista de comandos o acciones, y no sustituye la región de navegación por compartir el nombre coloquial «menú».
Compatibilidad y fuentes
Revisión de fuentes: 3 de octubre de 2026. <nav> está disponible en los motores de los navegadores actuales; los ejemplos usan navegación HTML nativa. El HTML Living Standard fija su significado y restricciones, y MDN sobre nav complementa la explicación y los datos de compatibilidad. El soporte del elemento no garantiza un anuncio idéntico en todas las combinaciones de lector de pantalla y navegador.