Etiqueta nav de HTML - Aprende HTML

La etiqueta <nav> es uno de los elementos HTML5. Define una sección de enlaces de navegación, ya sea dentro del documento actual o hacia otros documentos. Los bloques de navegación típicos son el menú principal de un sitio, una tabla de contenidos, una ruta de migas de pan o un índice. Marcar estos contenidos con <nav> mejora tanto la estructura del documento como su semántica, ayudando a los navegadores, lectores de pantalla y motores de búsqueda a comprender la página.

Un documento HTML puede contener varios elementos <nav> — por ejemplo, uno para la navegación de todo el sitio y otro para la navegación interna (dentro de la página).

Cuándo usar `<nav>` (y cuándo no)

<nav> está pensado para bloques principales de enlaces de navegación, no para cualquier grupo de enlaces de la página. Resérvalo para las áreas de navegación primarias y reconocibles que un usuario buscaría.

No es necesario envolver cada lista de enlaces en un <nav>:

Enlaces de utilidad del pie de página (política de privacidad, términos, derechos de autor) son generalmente una decisión de criterio. Un pequeño conjunto de enlaces legales o de utilidad puede vivir simplemente en el elemento <footer> sin un <nav> adicional. Reserva <nav> en el pie de página para un menú secundario genuino.
La paginación (anterior/siguiente, números de página) también es una decisión de criterio — es navegación, por lo que un <nav> es aceptable, pero un pequeño enlace de "siguiente artículo" no lo necesita.
Los enlaces dentro del contenido en el cuerpo de un párrafo o artículo no pertenecen a un <nav>.

Una buena regla general: si eliminar el bloque dificultara desplazarse por el sitio o el documento, probablemente sea <nav>. El elemento <nav> suele encontrarse junto a los elementos <header>, <main> y <aside> que estructuran una página HTML5.

Peligro

La etiqueta <nav> no puede anidarse dentro del elemento <address>.

Accesibilidad: el punto de referencia de navegación

Un elemento <nav> expone automáticamente un punto de referencia navigation a las tecnologías de asistencia, para que los usuarios de lectores de pantalla puedan saltar directamente a él. Por esto no debes añadir role="navigation" manualmente — el elemento ya lo implica.

Cuando una página contiene más de un <nav>, proporciona a cada uno un nombre accesible único para que los usuarios puedan distinguirlos. Usa aria-label (para una etiqueta literal corta) o aria-labelledby (para apuntar a un encabezado visible):

<!-- Primary site navigation -->
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Breadcrumb navigation on the same page -->
<nav aria-label="Breadcrumb">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <span aria-current="page">Laptops</span>
</nav>

No incluyas la palabra "navigation" en la etiqueta (por ejemplo aria-label="Main navigation") — las tecnologías de asistencia ya lo anuncian como punto de referencia de navegación, por lo que se leería dos veces. Usa aria-current="page" para marcar el enlace de la página actual.

Sintaxis

La etiqueta <nav> va en pares. El contenido se escribe entre las etiquetas de apertura (<nav>) y cierre (</nav>).

Ejemplo de uso de la etiqueta HTML `<nav>`:

Ejemplo de la etiqueta nav de HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h1>Programming Courses</h1>
    </header>
    <nav>
      <a href="/learn-html.html">HTML</a> | 
      <a href="/learn-css.html">CSS</a> | 
      <a href="/learn-javascript.html">JavaScript</a> | 
      <a href="/learn-php.html">PHP</a>
    </nav>
    <h2>Welcome to W3Docs!</h2>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la etiqueta `<nav>`:

Ejemplo de la etiqueta nav de HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav {
        display: flex;
        flex-wrap: wrap;
      }
      nav a {
        text-decoration: none;
        display: block;
        padding: 15px 25px;
        text-align: center;
        background-color: rgb(189, 185, 185);
        color: #464141;
        margin: 0;
        font-family: sans-serif;
      }
      nav a:hover {
        background-color: #777777;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h1>Example of the HTML nav tag:</h1>
    <nav aria-label="Primary">
      <a href="/">Home</a>
      <a href="/quiz">Quizzes</a>
      <a href="/snippets">Snippets</a>
      <a href="/tools">Tools</a>
      <a href="/string-functions">String Functions</a>
    </nav>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de creación de un menú desplegable con la etiqueta HTML `<nav>`:

El siguiente ejemplo crea un menú desplegable con CSS puro, revelando un <ul> anidado al hacer :hover.

Advertencia

Este menú desplegable solo con CSS se muestra para ilustrar la estructura de <nav>, no como código listo para producción. Como los submenús se abren únicamente con el :hover del ratón, son inaccesibles por teclado y para la mayoría de los usuarios de lectores de pantalla, lo que incumple WCAG. Un menú desplegable real también debe responder al foco del teclado (:focus-within) y exponer el estado con atributos como aria-expanded y aria-haspopup — generalmente con una pequeña cantidad de JavaScript.

Ejemplo de la etiqueta nav al crear un menú desplegable

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav ul ul {
        display: none;
      }
      nav ul li:hover > ul {
        display: block;
      }
      nav ul:after {
        content: "";
        clear: both;
        display: block;
      }
      nav ul li {
        float: left;
        position: relative;
        list-style-type: none;
      }
      nav ul li:hover {
        background: rgba(19, 20, 123, 0.67);
      }
      nav ul li:hover a {
        color: #fff;
      }
      nav ul li a {
        display: block;
        padding: 20px 30px;
        color: #ffffff;
        text-decoration: none;
        background-color: rgba(35, 17, 134, 0.8);
        font-family: sans-serif;
      }
      nav ul ul {
        background: #5f6975;
        padding: 0;
        position: absolute;
        top: 100%;
      }
      nav ul ul li {
        float: none;
        position: relative;
      }
      nav ul ul li a {
        padding: 15px 10px;
        color: #ffffff;
        text-transform: uppercase;
      }
      nav ul ul li a:hover {
        background: rgba(19, 20, 123, 0.67);
      }
    </style>
  </head>
  <body>
    <h1>Dropdown menu with the HTML nav tag:</h1>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/quiz">Quizzes</a>
          <ul>
            <li>
              <a href="/quiz/html-basic">HTML Basics</a>
            </li>
            <li>
              <a href="/quiz/css-basic">CSS Basics</a>
            </li>
            <li>
              <a href="/quiz/javascript-basic">JavaScript Basics</a>
            </li>
            <li>
              <a href="/quiz/php-basic">PHP Basics</a>
            </li>
            <li>
              <a href="/quiz/es6-basic">ES6 Basics</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/snippets">Snippets</a>
          <ul>
            <li>
              <a href="/snippets/angularjs">Angular JS</a>
            </li>
            <li>
              <a href="/snippets/apache">Apache</a>
            </li>
            <li>
              <a href="/snippets/git">Git</a>
            </li>
            <li>
              <a href="/snippets/linux">Linux</a>
            </li>
            <li>
              <a href="/snippets/nodejs">Node.Js</a>
            </li>
            <li>
              <a href="/snippets/symfony">Symfony</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/tools">Tools</a>
          <ul>
            <li>
              <a href="/tools/html-encoder">HTML ENCODER/DECODER</a>
            </li>
            <li>
              <a href="/tools/css-maker">CSS MAKER</a>
            </li>
            <li>
              <a href="/tools/password-generator">PASSWORD GENERATOR</a>
            </li>
            <li>
              <a href="/tools/image-base64">Base 64</a>
            </li>
            <li>
              <a href="/tools/code-diff">CODE DIFF</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/string-functions">String Functions</a>
          <ul>
            <li>
              <a href="/tools/string-reverse">STRING REVERSE</a>
            </li>
            <li>
              <a href="/tools/string-word-count">STRING WORD COUNT</a>
            </li>
            <li>
              <a href="/tools/string-remove-empty-lines">EMPTY LINES REMOVER</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>

Pruébalo tú mismo »

Atributos

La etiqueta <nav> admite los Atributos Globales y los Atributos de Evento.. Ten en cuenta que los atributos globales se aplican a todos los elementos HTML.

Cómo aplicar estilos a una etiqueta HTML `<nav>`

<nav> es un contenedor semántico sin apariencia predeterminada propia, por lo que el estilo se aplica con CSS. Un patrón común es darle al menú un fondo y organizar los enlaces horizontalmente, eliminando el subrayado predeterminado de los enlaces y separándolos:

nav {
  background-color: #333;
  padding: 10px;
}
nav a {
  color: white;
  text-decoration: none;
  margin-right: 15px;
}

Para organizar los enlaces en una fila, Flexbox (display: flex en el <nav>) es el enfoque moderno, como se muestra en el segundo ejemplo anterior.

Práctica

¿Cuál es el propósito y el uso de la etiqueta nav en HTML?

Se usa para definir un conjunto de enlaces de navegación.Proporciona una forma de que el usuario navegue por un sitio web.Se usa para crear pestañas en una página web.Se usa para insertar multimedia como audio y video en una página web.Define un bloque principal de enlaces de navegación y no todos los enlaces de un documento HTML deben estar dentro de un elemento nav.

Cuándo usar <nav> (y cuándo no)

Accesibilidad: el punto de referencia de navegación

Sintaxis

Ejemplo de uso de la etiqueta HTML <nav>:

Ejemplo de la etiqueta <nav>:

Ejemplo de creación de un menú desplegable con la etiqueta HTML <nav>:

Atributos

Cómo aplicar estilos a una etiqueta HTML <nav>

Práctica

Cuándo usar `<nav>` (y cuándo no)

Ejemplo de uso de la etiqueta HTML `<nav>`:

Ejemplo de la etiqueta `<nav>`:

Ejemplo de creación de un menú desplegable con la etiqueta HTML `<nav>`:

Cómo aplicar estilos a una etiqueta HTML `<nav>`