El elemento <nav> y los menús de navegación

En este artículo descubrirás qué representa <nav> en HTML5, cómo estructurar menús de navegación robustos, accesibles y optimizados para SEO, y verás ejemplos reales con y sin Bootstrap.

¿Qué es el elemento <nav>?

El elemento semántico <nav> se introdujo en HTML5 para identificar bloques de enlaces de navegación principales o secundarios dentro de una página. Los motores de búsqueda y los lectores de pantalla lo utilizan para entender la estructura del sitio y ofrecer una mejor experiencia al usuario.

• Semántica: indica que el contenido contiene enlaces de navegación.
• Accesibilidad: permite a los usuarios de tecnologías asistivas saltar directamente a la zona de navegación.
• SEO: los crawlers le dan mayor relevancia a los enlaces dentro de <nav>.

Buenas prácticas al usar <nav>

Estructura básica de un menú de navegación

<nav aria-label="Navegación principal">
  <ul class="nav">
    <li class="nav-item"><a class="nav-link active" href="#">Inicio</a></li>
    <li class="nav-item"><a class="nav-link" href="#servicios">Servicios</a></li>
    <li class="nav-item"><a class="nav-link" href="#contacto">Contacto</a></li>
  </ul>
</nav>

Este fragmento ya es totalmente válido, pero podemos mejorarlo con Bootstrap para que sea responsivo.

Menú horizontal (sin framework)

<nav aria-label="Menú principal">
  <ul class="menu-horizontal">
    <li><a href="/">Home</a></li>
    <li><a href="/productos">Productos</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>
<style>
  .menu-horizontal { display: flex; list-style: none; gap: 1.5rem; }
  .menu-horizontal a { text-decoration: none; color: #333; }
  .menu-horizontal a:hover { color: #007bff; }
</style>

Menú vertical con submenús (dropdown)

<nav aria-label="Navegación lateral">
  <ul class="menu-vertical">
    <li><a href="/">Inicio</a></li>
    <li>
      <a href="#" aria-haspopup="true" aria-expanded="false">Servicios</a>
      <ul class="submenu">
        <li><a href="/consultoria">Consultoría</a></li>
        <li><a href="/desarrollo">Desarrollo</a></li>
        <li><a href="/soporte">Soporte</a></li>
      </ul>
    </li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>
<style>
  .menu-vertical { list-style: none; padding: 0; width: 200px; }
  .menu-vertical a { display: block; padding: .5rem 1rem; color: #212529; text-decoration: none; }
  .menu-vertical a:hover { background: #f8f9fa; }
  .submenu { display: none; list-style: none; padding-left: 1rem; }
  .menu-vertical li:hover > .submenu { display: block; }
</style>

Utiliza atributos ARIA (aria-haspopup, aria-expanded) para que los lectores de pantalla comprendan la jerarquía.

Menú responsivo con Bootstrap 5

<!-- Requiere incluir Bootstrap CSS/JS -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" aria-label="Navegación principal">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MiSitio</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Alternar navegación">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#servicios">Servicios</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Productos</a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#producto1">Producto 1</a></li>
            <li><a class="dropdown-item" href="#producto2">Producto 2</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#todos">Ver todos</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contacto">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap gestiona automáticamente el colapso, la accesibilidad (atributos ARIA) y el estilo visual, lo que reduce el tiempo de desarrollo.

Accesibilidad y SEO: cómo aprovechar <nav>

• Roles y ARIA: aunque <nav> ya implica role="navigation", es recomendable añadir aria-label cuando haya varios bloques de navegación.
• Orden lógico: coloca el elemento <nav> después del encabezado (<header>) y antes del contenido principal (<main>) para que los usuarios puedan saltar rápidamente.
• Enlaces descriptivos: evita textos genéricos como "clic aquí"; usa palabras clave relevantes para mejorar el SEO.
• Focus visible: asegúrate de que los enlaces tengan un contorno visible al navegar con teclado.

a:focus { outline: 2px solid #0056b3; outline-offset: 2px; }

Comparativa: <nav> vs. <div> y <header>

Optimización y rendimiento

Para evitar carga innecesaria:

• Minimiza el número de <nav> (máximo 2 en la mayoría de los sitios).
• Utiliza rel="preload" para fuentes de iconos que acompañen al menú.
• Si usas Bootstrap, carga solo los módulos de JavaScript que necesitas (por ejemplo, collapse y dropdown).

Solución de problemas frecuentes

Conclusión

El elemento <nav> es la base para construir menús de navegación claros, accesibles y SEO‑friendly. Con los ejemplos mostrados, ya sea usando CSS puro o aprovechando la potencia de Bootstrap, podrás crear interfaces de usuario consistentes y adaptables a cualquier dispositivo.