<nav>

<nav> es el elemento semántico para bloques de navegación: grupos de enlaces que permiten al usuario moverse por el sitio o por una sección larga de la página. No es un contenedor genérico para cualquier conjunto de links — es específicamente para navegación con peso propio, navegación que merece estar expuesta como landmark accesible y que el usuario va a querer saltar directamente.

La distinción importa porque los usuarios de lectores de pantalla pueden navegar entre landmarks con un atajo de teclado. Si todos los grupos de links de la página fueran <nav>, el menú de landmarks se volvería inútil — habría <nav> para el menú principal, para los links del artículo, para los links del pie y para cada lista de referencias en el texto. El objetivo de <nav> es marcar los bloques de navegación que tienen identidad propia y peso de orientación en la página, no cualquier conjunto de hiperlinks.

<nav> siempre genera el landmark ARIA navigation, independientemente de dónde esté en el árbol del documento. Esto lo diferencia de <header> y <footer>, cuyo rol cambia según el contexto. Un <nav> dentro del <header> y un <nav> en el <footer> son ambos landmarks navigation. Cuando hay más de un <nav> en la página, lo correcto es etiquetarlos con aria-label para distinguirlos en el menú de landmarks.

Cómo funciona

<nav> es un elemento de contenido de sección: tiene significado propio en el outline del documento (como <article>, <section> y <aside>). Su display por defecto es block. Acepta contenido de flujo — típicamente una <ul> o <ol> con <li> y <a>, aunque también puede contener links directos sin lista.

El landmark navigation que genera es siempre activo, sin importar el contexto de anidado. A diferencia de <header> o <footer> (que cambian de rol dentro de ciertos elementos), <nav> siempre es navigation. Por eso, cuando hay múltiples <nav> en la página, la especificación ARIA recomienda distinguirlos con aria-label o aria-labelledby:

<!-- Con aria-label para distinguir dos nav en la misma página -->
<nav aria-label="Menú principal">...</nav>
<nav aria-label="Breadcrumbs">...</nav>

Sin etiqueta, el lector de pantalla solo puede anunciar “navigation, navigation” sin distinguirlos. Con etiqueta anuncia “navigation, Menú principal” y “navigation, Breadcrumbs”.

Modelo de contenido

<nav> acepta contenido de flujo. El patrón más común es una lista (<ul> o <ol>) de enlaces:

<nav aria-label="Menú principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

La lista no es obligatoria — hay casos donde una secuencia de links directos sin lista es más clara:

<!-- Breadcrumbs: la lista también funciona pero la prosa fluida es válida -->
<nav aria-label="Ruta actual">
  <a href="/">Inicio</a> &rsaquo;
  <a href="/blog">Blog</a> &rsaquo;
  <span>HTML semántico</span>
</nav>

Sintaxis

<!-- Menú de navegación principal con lista -->
<nav aria-label="Menú principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/acerca">Acerca</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

<!-- Paginación -->
<nav aria-label="Paginación">
  <a href="/blog?p=1" aria-label="Página anterior">←</a>
  <a href="/blog?p=3" aria-label="Página siguiente">→</a>
</nav>

<!-- Índice de contenidos en una guía larga -->
<nav aria-label="Índice">
  <ol>
    <li><a href="#introduccion">Introducción</a></li>
    <li><a href="#conceptos">Conceptos clave</a></li>
    <li><a href="#ejemplos">Ejemplos</a></li>
  </ol>
</nav>

Atributos

<nav> no tiene atributos propios. Acepta todos los atributos globales de HTML. El atributo global más relevante en la práctica es aria-label (técnicamente un atributo ARIA, no propio del elemento), que se usa cuando hay más de un <nav> en la página para distinguirlos en el menú de landmarks.

Rol de landmark y accesibilidad

El rol ARIA implícito de <nav> es siempre navigation, sin excepción de contexto. Esto permite que los usuarios de lectores de pantalla naveguen directamente al bloque de navegación desde el menú de landmarks.

Cuando una página tiene varios <nav>, sin etiqueta el menú de landmarks solo muestra “navigation” repetido. Con aria-label el menú muestra nombres descriptivos. Siempre etiquetar cuando hay más de uno.

Una consideración para sitios con muchas páginas: si el menú de navegación principal se repite en todas las páginas, es buena práctica incluir un enlace de “saltar al contenido” (<a href="#main">Saltar al contenido</a>) antes del <nav> para que los usuarios de teclado no tengan que tabular por todos los links del menú en cada carga de página.

Cuándo usar <nav> / cuándo no

La heurística: ¿el usuario querría saltar directamente a este grupo de links desde el menú de landmarks de su lector de pantalla? Si la respuesta es sí, <nav>. Si no, es una lista de links normal.

Notas, gotchas e interacción

• No toda lista de links es <nav>. El error más común es envolver en <nav> cualquier conjunto de <a>. Los links a fuentes externas al final de un artículo, un grupo de tags de un post, o los links de productos relacionados en un e-commerce generalmente no son <nav>.
• Puede haber más de un <nav> por página. Es válido — y habitual — tener un <nav> en el <header> y otro en el <footer>. Recordar etiquetar ambos con aria-label distintos.
• La lista no es obligatoria. Aunque <ul>/<li> es el patrón más semántico para menús (comunica que los links son un conjunto), hay casos donde links directos sin lista son aceptables (breadcrumbs, paginación simple).
• <nav> no implica posición visual. El menú no aparece arriba, a la izquierda ni en ningún lugar específico por ser <nav>. La posición es trabajo de CSS.

Vigente / legacy

<nav> está completamente vigente desde HTML5 con soporte universal. Sus predecesores funcionales — <div id="nav">, <div class="menu">, <div class="navigation"> — son legacy: cumplen el efecto visual con CSS pero no generan el landmark navigation. No hay atributos propios de <nav> marcados como legacy.