La Etiqueta NAV

La etiqueta <nav> (abreviatura de navigation) define una sección de enlaces de navegación en un documento HTML. Es un elemento semántico que ayuda a los motores de búsqueda, lectores de pantalla y desarrolladores a identificar los bloques principales de navegación de un sitio web.

Casos comunes de uso:

• Menús principales (header).

• Menús laterales (sidebar).

• Tablas de contenido.

• Enlaces de paginación.

• Breadcrumbs (migas de pan).

Sintaxis básica

<nav>
  <!-- Lista de enlaces -->
</nav>

Ejemplos prácticos

Menú principal horizontal

El uso más típico: un menú en el encabezado de la página.

<header>
  <nav>
    <ul>
      <li><a href="#inicio">Inicio</a></li>
      <li><a href="#servicios">Servicios</a></li>
      <li><a href="#contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

Menú lateral (sidebar)

Para navegación secundaria:

<header>
  <nav>
    <ul>
      <li><a href="#inicio">Inicio</a></li>
      <li><a href="#servicios">Servicios</a></li>
      <li><a href="#contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

Paginación

En blogs o listas de productos:

<nav class="paginacion">
  <a href="#">« Anterior</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">Siguiente »</a>
</nav>

Breadcrumbs (migas de pan)

Muestra la ubicación del usuario en el sitio:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="#inicio">Inicio</a></li>
    <li><a href="#blog">Blog</a></li>
    <li>Título del artículo</li>
  </ol>
</nav>

Estilización con CSS

Personaliza el menú con CSS para que sea visualmente atractivo y responsivo:

Ejemplo: Menú horizontal con flexbox

nav {
  background: #333;
  padding: 1rem;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
}

nav a:hover {
  background: #555;
}

/* Estilo para móviles */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
}

Accesibilidad y buenas prácticas

Usa listas (<ul>/<li>) para estructurar los enlaces, ya que los lectores de pantalla las interpretan mejor.

Agrega aria-label si hay múltiples menús en la página:

<nav aria-label="Menú principal">
  <!-- Enlaces -->
</nav>

Evita anidar <nav> dentro de <nav>:
Cada bloque de navegación debe tener su propia etiqueta.

No uses <nav> para grupos pequeños de enlaces (ej: footer con enlaces legales). Para esos casos, usa <footer> sin <nav>.

Errores comunes

Usar <nav> para cualquier grupo de enlaces:

<!-- Incorrecto -->
<nav>
  <a href="#legal">Aviso legal</a>
  <a href="#privacidad">Privacidad</a>
</nav>

<!-- Correcto (si no es navegación principal) -->
<footer>
  <a href="#legal">Aviso legal</a>
</footer>

Ignorar la jerarquía semántica:
No coloques contenido no relacionado dentro de <nav>:

<!-- Incorrecto -->
<nav>
  <h1>Título de la página</h1>
  <ul>...</ul>
</nav>

Ejemplo avanzado: Menú responsivo con hamburguesa

Combina <nav> con CSS y JavaScript para móviles:

<nav class="menu-movil">
  <button id="boton-menu">☰</button>
  <ul id="lista-menu" class="oculto">
    <li><a href="#inicio">Inicio</a></li>
    <li><a href="#servicios">Servicios</a></li>
  </ul>
</nav>

<script>
  document.getElementById('boton-menu').addEventListener('click', () => {
    document.getElementById('lista-menu').classList.toggle('oculto');
  });
</script>

<style>
  .oculto {
    display: none;
  }
  @media (min-width: 769px) {
    #boton-menu {
      display: none;
    }
    #lista-menu.oculto {
      display: flex;
    }
  }
</style>

Casos de uso reales

• E-commerce: Menú de categorías.

• Blogs: Navegación entre entradas.

• Portafolios: Acceso a secciones como "Proyectos" o "Sobre mí".

Conclusión

La etiqueta <nav> es esencial para estructurar la navegación de tu sitio web de manera semántica y accesible. Al usarla correctamente:

• Mejoras el SEO.
• Facilitas la experiencia de usuarios con discapacidades.
• Organizas tu código para un mantenimiento más sencillo.

¡Inclúyela siempre que necesites agrupar enlaces de navegación principales!