¿Para qué se utiliza la etiqueta «nav»?

La etiqueta <nav> en HTML5 se utiliza para definir una sección de una página cuyo propósito principal es proporcionar enlaces de navegación. Estos pueden ser enlaces a otras páginas dentro del mismo sitio web o a diferentes secciones dentro de la página actual.

El uso de <nav> es semántico, lo que significa que ayuda a los navegadores, a las tecnologías de asistencia (como los lectores de pantalla) y a los motores de búsqueda a comprender que esa parte de la página está dedicada a la navegación.

Esto es especialmente útil para la accesibilidad, ya que los usuarios de lectores de pantalla pueden, por ejemplo, saltar directamente a los bloques de navegación o evitarlos si así lo desean.

¿Qué tipo de contenido suele ir dentro de una etiqueta <nav>?

• El menú de navegación principal del sitio (a menudo ubicado en la cabecera o en una barra lateral).
• Una tabla de contenidos que enlaza a diferentes secciones de la página actual.
• Enlaces de paginación (por ejemplo, «Anterior», «Siguiente», números de página).
• «Migas de pan» («breadcrumbs»), que muestran la ruta del usuario dentro de la jerarquía del sitio.
• Un índice alfabético u otro tipo de navegación secundaria relevante.

Es una práctica común y recomendable estructurar los enlaces de navegación dentro de un elemento <nav> utilizando una lista no ordenada (<ul>), donde cada elemento de la lista (<li>) contiene un enlace (<a>).

Ejemplo de un menú de navegación principal:

<nav aria-labelledby="menu-principal-titulo">
  <h2 id="menu-principal-titulo" class="sr-only">Navegación Principal</h2> <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/productos.html">Productos</a></li>
    <li><a href="/acerca-de.html">Sobre Nosotros</a></li>
    <li><a href="/contacto.html">Contacto</a></li>
  </ul>
</nav>
Lenguaje del código: PHP (php)

En el ejemplo anterior, se incluye un <h2> (que podría estar visualmente oculto con CSS usando una clase como sr-only o «screen-reader-only») referenciado por aria-labelledby para dar un nombre accesible al bloque de navegación, lo cual es una buena práctica, especialmente si tienes múltiples elementos <nav> en la misma página.

Importante: No todos los grupos de enlaces de una página deben estar dentro de una etiqueta <nav>.

Por ejemplo, una simple lista de enlaces a redes sociales en el pie de página, o enlaces dentro del contenido de un <footer> (como «Términos y Condiciones» o «Política de Privacidad») no necesariamente requieren estar envueltos en <nav>, a menos que constituyan bloques de navegación primarios o muy significativos para la estructura del sitio.

Utiliza <nav> para las secciones de navegación más importantes. Un documento puede tener varios elementos <nav>.