Docs ejecutables de HTML: Nav en HTML

Q: ¿Los enlaces dentro de nav deben ir en una lista?

Es el patrón habitual y uno bueno: un de elementos permite a los lectores de pantalla anunciar cuántos enlaces tiene el menú. Los enlaces sueltos directamente dentro de también son válidos, por ejemplo para dos o tres enlaces en fila.

Q: ¿Cada grupo de enlaces necesita un elemento nav?

No. Usa solo para los bloques de navegación principales. Unos pocos enlaces en un párrafo o una lista corta de enlaces legales en el pie de página no lo necesitan, y demasiados landmarks de navegación hacen que cada uno sea más difícil de encontrar.

Q: ¿Cómo hago una barra de navegación horizontal?

Pon los enlaces en un dentro de , y luego dale a la lista display: flex; list-style: none; padding: 0; y un gap. Flexbox coloca los elementos en fila.

Q: ¿Cómo muestro la página actual en una barra de navegación?

Añade aria-current="page" al enlace de la página en la que está el usuario, y dale estilo con el selector [aria-current="page"]. Los lectores de pantalla también lo anuncian entonces como la página actual.

Una barra de navegación con nav

Envuelve tu menú en <nav> y pon los enlaces en una lista. Flexbox convierte la lista en una barra horizontal:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    nav { background: #111827; }
    nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px; }
    nav a {
      display: block; padding: 8px 14px; border-radius: 6px;
      color: #e5e7eb; text-decoration: none;
    }
    nav a:hover { background: #374151; color: #fff; }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

list-style: none y padding: 0 quitan las viñetas y la sangría. display: block en cada enlace permite que su padding ocupe espacio real en la barra, así que toda la caja con padding es la zona de clic. Borra la línea display: flex y el mismo menú se convierte en una lista vertical, que es el aspecto de un menú lateral.

<nav> en sí no se ve. Su trabajo es el significado: los lectores de pantalla lo exponen como landmark de navegación, así que el usuario puede saltar al menú, o saltárselo, con una sola tecla.

Marcar la página actual

Añade aria-current="page" al enlace de la página que se está mostrando. Les dice a los lectores de pantalla "estás aquí", y le da al CSS un punto de apoyo para resaltar el enlace:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Current page</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; border-bottom: 2px solid #e5e7eb; }
    nav a { display: block; padding: 10px 0; color: #374151; text-decoration: none; }
    nav a[aria-current="page"] {
      color: #2563eb; font-weight: 600;
      box-shadow: inset 0 -3px 0 #2563eb;
    }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#" aria-current="page">Lessons</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
</body>
</html>

Mueve aria-current="page" a otro enlace y el resaltado lo sigue. Dar estilo al atributo en lugar de a una clase .active mantiene sincronizados el aspecto y la accesibilidad: no puedes tener uno sin el otro.

Varios nav en una página: etiquetas y migas de pan

Una página puede tener un menú principal, unas migas de pan y un índice, cada uno en su propio <nav>. Dale a cada uno un aria-label, así un lector de pantalla anuncia "navegación Breadcrumb" en lugar de tres entradas idénticas de "navegación":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breadcrumb</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
    .crumbs li + li::before { content: "/"; margin: 0 8px; color: #9ca3af; }
    .crumbs a { color: #2563eb; }
  </style>
</head>
<body>
  <nav class="crumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">HTML</a></li>
      <li><span aria-current="page">nav</span></li>
    </ol>
  </nav>
  <h1>HTML nav</h1>
</body>
</html>

Las migas de pan usan una lista ordenada <ol> porque el orden importa. Las barras vienen del ::before de CSS, así que los lectores de pantalla no leen "barra" entre cada elemento. El último elemento es la página actual y no es un enlace.

Un índice

Una lista de enlaces a secciones de la misma página también es navegación. Los enlaces #id saltan al elemento con ese id; pruébalos en la vista previa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table of contents</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; }
    nav h2 { font-size: 14px; margin: 4px 0; }
    section { min-height: 200px; border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-labelledby="toc-title">
    <h2 id="toc-title">On this page</h2>
    <ol>
      <li><a href="#install">Install</a></li>
      <li><a href="#configure">Configure</a></li>
      <li><a href="#deploy">Deploy</a></li>
    </ol>
  </nav>
  <section id="install"><h2>Install</h2></section>
  <section id="configure"><h2>Configure</h2></section>
  <section id="deploy"><h2>Deploy</h2></section>
</body>
</html>

Aquí la etiqueta viene de un encabezado visible mediante aria-labelledby, que es mejor que aria-label cuando el encabezado ya está en pantalla.

Un botón de menú para móvil

En pantallas estrechas, los menús suelen ocultarse tras un botón. Usa un <button> real con aria-expanded, y mantén los enlaces dentro de <nav>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; border: 1px solid #111827; border-radius: 6px; background: #fff; cursor: pointer; }
    #menu { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid #e5e7eb; border-radius: 8px; }
    #menu a { display: block; padding: 10px 14px; color: #111827; text-decoration: none; }
    #menu li + li { border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <button aria-expanded="false" aria-controls="menu" id="toggle">Menu</button>
    <ul id="menu" hidden>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <script>
    const toggle = document.getElementById('toggle');
    const menu = document.getElementById('menu');
    toggle.addEventListener('click', () => {
      const open = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!open));
      menu.hidden = open;
    });
  </script>
</body>
</html>

aria-expanded le dice al lector de pantalla si el menú está abierto, y el atributo hidden quita la lista tanto de la pantalla como del árbol de accesibilidad mientras está cerrado. En pantallas anchas mostrarías la lista con una media query y ocultarías el botón.

Errores comunes

Envolver cada grupo de enlaces en <nav>. Úsalo para el menú principal, las migas de pan, la paginación y los índices. Los enlaces dentro de un texto no son bloques de navegación.
Un botón de menú hecho con un <div>. No recibe el foco ni se puede pulsar con el teclado. Usa <button>.
Varios nav sin etiquetas. Añade aria-label o aria-labelledby a cada uno para poder distinguirlos.
Solo colorear el enlace actual. Añade aria-current="page"; el color solo no se anuncia y puede que no todo el mundo lo vea.
Enlaces con href="#" en producción. Valen en una demo, pero los elementos reales del menú necesitan URL reales para funcionar al abrirlos en una pestaña nueva. La página de link en HTML explica cómo funcionan los valores de href.

Preguntas frecuentes

¿Qué es la etiqueta nav en HTML?

<nav> es un elemento semántico que envuelve un bloque de enlaces de navegación principales, como el menú del sitio, un índice o unas migas de pan. Los lectores de pantalla lo listan como landmark de navegación para que se pueda saltar directamente a él.

¿Los enlaces dentro de nav deben ir en una lista?

Es el patrón habitual y uno bueno: un <ul> de elementos <li> permite a los lectores de pantalla anunciar cuántos enlaces tiene el menú. Los enlaces sueltos directamente dentro de <nav> también son válidos, por ejemplo para dos o tres enlaces en fila.

¿Cada grupo de enlaces necesita un elemento nav?

No. Usa <nav> solo para los bloques de navegación principales. Unos pocos enlaces en un párrafo o una lista corta de enlaces legales en el pie de página no lo necesitan, y demasiados landmarks de navegación hacen que cada uno sea más difícil de encontrar.

¿Cómo hago una barra de navegación horizontal?

Pon los enlaces en un <ul> dentro de <nav>, y luego dale a la lista display: flex; list-style: none; padding: 0; y un gap. Flexbox coloca los elementos en fila.

¿Cómo muestro la página actual en una barra de navegación?

Añade aria-current="page" al enlace de la página en la que está el usuario, y dale estilo con el selector [aria-current="page"]. Los lectores de pantalla también lo anuncian entonces como la página actual.

¿Una página puede tener más de un nav?

Sí, por ejemplo un menú principal, unas migas de pan y un índice. Dale a cada uno un aria-label distinto, como "Main" o "Breadcrumb", para que quienes usan lectores de pantalla puedan distinguirlos.

Conceptos relacionados