Elemento nav

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento nav es un contenedor para enlaces de navegación, que se supone proveen formas de acceder a las secciones del sitio web, así como a documentos externos. Se supone que los vínculos dentro de este elemento corresponden a un bloque de navegación principal únicamente.

El elemento nav puede ser una buena forma de mejorar la accesibilidad de un sitio web. Algunos navegadores, como los navegadores de voz, pueden proveer la información dentro de este elemento a pedido, o ignorarla al buscar el contenido principal.

No es requerido que los vínculos que habitualmente se encuentran al final de un documento (contacto, compartir, información legal, etc.) pertenezcan a un elemento nav. El elemento footer en sí mismo es suficiente en estos casos.

Ejemplos

Debajo verás una lista de vínculos a las secciones principales de un sitio web, correctamente encerradas por un elemento nav. Este bloque de navegación precede al contenido principal del documento, como puede suceder en ejemplos reales.

Nota que las secciones nav también pueden utilizarse para proveer vínculos navigacionales dentro del documento. Este es el caso de las tablas de contenido como la utilizada al comienzo de este documento.

<nav>
  <ul>
    <li><a href="/es/">Inicio</a></li>
    <li><a href="/es/tutorials.html">Tutoriales</a></li>
    <li><a href="/es/reference.html">Referencia</a></li>
    <li><a href="/es/tools-resources.html">Recursos</a></li>
    <li><a href="/es/contactus.php">Contáctame</a></li>
  </ul>
</nav>
<section>
  <h1>Tutoriales y referencia HTML</h1>
  <p>Este es un sitio web dedicado a proveer un conjunto de tutoriales para el lenguaje más básico de la web...</p>
</section>

Tutoriales y referencia HTML

Este es un sitio web dedicado a proveer un conjunto de tutoriales para el lenguaje más básico de la web...

Nuetsro segundo ejemplo muestra una sección de navegación innovadora. Allí, los vínculos a las secciones principales del sitio son presentados en prosa.

<nav>
  <p>Además de <a href="/es/">la página de incio</a>, verás el contenido principal del sitio dividido en tres secciones: los <a href="/es/tutorials.html">tutoriales</a>, la <a href="/es/reference.html">referencia</a> y los <a href="/es/tools-resources.html">recursos</a>. No olvides <a href="/es/contactus.php">contactarme</a> en caso de que tengas alguna consulta.</p>
</nav>

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.