Elemento nav en HTML

Elemento nav en HTML

El elemento <nav> es un contenedor semántico que representa una sección de una página destinada a contener enlaces de navegación principales, ya sea dentro del documento actual o hacia otras páginas. Este elemento ayuda a los lectores de pantalla y otras tecnologías de asistencia a determinar si deben omitir la navegación inicial o no.

<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/servicios">Servicios</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>

Características principales

• Es un elemento semántico introducido en HTML5.
• Puede haber múltiples elementos <nav> en una página.
• No todos los grupos de enlaces necesitan estar dentro de un elemento <nav> — solo los bloques principales de enlaces de navegación.
• Es un elemento de bloque por defecto.
• Comunica a las tecnologías de asistencia que el contenido dentro es navegación principal.

Usos comunes

Navegación principal del sitio

El uso más común es para el menú principal de navegación del sitio:

<header>
  <h1>Mi Sitio Web</h1>
  <nav aria-label="Navegación principal">
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/tienda">Tienda</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/acerca-de">Acerca de</a></li>
      <li><a href="/contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

Navegación secundaria

Puede utilizarse para menús secundarios o submenús:

<nav aria-label="Categorías de productos">
  <h2>Categorías</h2>
  <ul>
    <li><a href="/categoria/electronica">Electrónica</a></li>
    <li><a href="/categoria/ropa">Ropa</a></li>
    <li><a href="/categoria/hogar">Hogar</a></li>
    <li><a href="/categoria/deportes">Deportes</a></li>
  </ul>
</nav>

Navegación de paginación

Para páginas con contenido paginado:

<nav aria-label="Paginación">
  <ul class="pagination">
    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li><a href="?page=3" aria-current="page">3</a></li>
    <li><a href="?page=4">4</a></li>
    <li><a href="?page=5">5</a></li>
    <li><a href="?page=6">Siguiente &raquo;</a></li>
  </ul>
</nav>

Navegación dentro de un artículo (tabla de contenidos)

Para mostrar la estructura interna de un artículo largo:

<article>
  <h1>Guía completa de HTML5</h1>
  
  <nav aria-label="Tabla de contenidos">
    <h2>Contenido</h2>
    <ol>
      <li><a href="#introduccion">Introducción</a></li>
      <li><a href="#elementos-basicos">Elementos básicos</a></li>
      <li><a href="#elementos-semanticos">Elementos semánticos</a></li>
      <li><a href="#formularios">Formularios</a></li>
      <li><a href="#multimedia">Multimedia</a></li>
      <li><a href="#conclusion">Conclusión</a></li>
    </ol>
  </nav>
  
  <section id="introduccion">
    <h2>Introducción</h2>
    <!-- Contenido -->
  </section>
  
  <!-- Más secciones -->
</article>

Breadcrumbs (migas de pan)

Para mostrar la jerarquía de navegación:

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">Inicio</a></li>
    <li><a href="/categorias">Categorías</a></li>
    <li><a href="/categorias/tecnologia">Tecnología</a></li>
    <li aria-current="page">Smartphones</li>
  </ol>
</nav>

Menú de navegación responsivo

Un ejemplo común de menú responsivo que se convierte en menú de hamburguesa en pantallas pequeñas:

<header>
  <div class="logo">
    <img src="logo.svg" alt="Logo de la empresa">
  </div>
  
  <button class="menu-toggle" aria-expanded="false" aria-controls="main-menu">
    <span class="sr-only">Abrir menú</span>
    <span class="hamburger"></span>
  </button>
  
  <nav id="main-menu" aria-label="Navegación principal">
    <ul>
      <li><a href="/">Inicio</a></li>
      <li class="has-submenu">
        <a href="/productos">Productos</a>
        <ul class="submenu">
          <li><a href="/productos/nuevos">Nuevos</a></li>
          <li><a href="/productos/destacados">Destacados</a></li>
          <li><a href="/productos/ofertas">Ofertas</a></li>
        </ul>
      </li>
      <li><a href="/servicios">Servicios</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

Navegación en el footer

Ejemplo de uso en el pie de página:

<footer>
  <div class="footer-content">
    <div class="footer-branding">
      <img src="logo.svg" alt="Logo de la empresa">
      <p>&copy; 2025 Mi Empresa. Todos los derechos reservados.</p>
    </div>
    
    <nav aria-label="Enlaces útiles">
      <h3>Enlaces útiles</h3>
      <ul>
        <li><a href="/acerca-de">Acerca de nosotros</a></li>
        <li><a href="/terminos">Términos y condiciones</a></li>
        <li><a href="/privacidad">Política de privacidad</a></li>
        <li><a href="/faq">Preguntas frecuentes</a></li>
      </ul>
    </nav>
    
    <nav aria-label="Categorías populares">
      <h3>Categorías populares</h3>
      <ul>
        <li><a href="/categoria/tecnologia">Tecnología</a></li>
        <li><a href="/categoria/moda">Moda</a></li>
        <li><a href="/categoria/hogar">Hogar</a></li>
        <li><a href="/categoria/deportes">Deportes</a></li>
      </ul>
    </nav>
    
    <nav aria-label="Redes sociales">
      <h3>Síguenos</h3>
      <ul class="social-links">
        <li><a href="https://facebook.com/miempresa">Facebook</a></li>
        <li><a href="https://twitter.com/miempresa">Twitter</a></li>
        <li><a href="https://instagram.com/miempresa">Instagram</a></li>
        <li><a href="https://linkedin.com/company/miempresa">LinkedIn</a></li>
      </ul>
    </nav>
  </div>
</footer>

Buenas prácticas

1. Uso adecuado: Utiliza <nav> solo para bloques importantes de navegación, no para cada grupo de enlaces.
2. Estructura ordenada: Coloca los enlaces de navegación dentro de listas (<ul> o <ol>) para mejorar la accesibilidad.
3. Atributo aria-label: Añade un aria-label descriptivo cuando hay múltiples elementos <nav> en la página:

   <nav aria-label="Navegación principal">
     <!-- Enlaces -->
   </nav>
   
   <nav aria-label="Recursos relacionados">
     <!-- Enlaces -->
   </nav>
   

4. Menús desplegables accesibles: Para submenús, asegúrate de que sean accesibles mediante teclado:

   <nav>
     <ul>
       <li><a href="/">Inicio</a></li>
       <li>
         <button aria-expanded="false" aria-controls="submenu-productos">
           Productos <span aria-hidden="true">▼</span>
         </button>
         <ul id="submenu-productos" hidden>
           <li><a href="/productos/categoria1">Categoría 1</a></li>
           <li><a href="/productos/categoria2">Categoría 2</a></li>
         </ul>
       </li>
     </ul>
   </nav>
   

5. Estado actual: Indica la página actual en la navegación:

   <nav>
     <ul>
       <li><a href="/">Inicio</a></li>
       <li><a href="/servicios" aria-current="page">Servicios</a></li>
       <li><a href="/contacto">Contacto</a></li>
     </ul>
   </nav>
   

6. Skip navigation: Proporciona un enlace para saltar la navegación, útil para usuarios de teclado:

   <a href="#contenido-principal" class="skip-link">Saltar al contenido principal</a>
   <nav>
     <!-- Enlaces de navegación -->
   </nav>
   <main id="contenido-principal">
     <!-- Contenido principal -->
   </main>
   

Cuándo NO usar el elemento nav

No todos los grupos de enlaces necesitan estar dentro de un elemento <nav>. Algunos casos donde no es necesario utilizarlo:

• Enlaces aislados dentro del contenido.
• Enlaces en el pie de página que no son de navegación principal (como enlaces a redes sociales individuales).
• Enlaces de publicidad o promocionales que no son parte de la estructura de navegación del sitio.