HTML tiene muchas características para resaltar la tecnología de front-end, y una de las características de la versión HTML5 es la etiqueta de navegación. En la versión anterior, HTML tenía diferentes características, pero en HTML5, la Navigation (Nav) admite Atributos Globales y Atributos de Evento.

La etiqueta <nav> en HTML representa un conjunto de enlaces de navegación en el documento. Por lo general, las páginas web tienen secciones con enlaces de navegación que se utilizan para que los usuarios naveguen por el sitio; estos enlaces se especifican dentro de la etiqueta de Navegación.

Sintaxis de Etiqueta NAV

Cada etiqueta HTML tiene una sintaxis separada, como el siguiente código: la sintaxis básica para la etiqueta de Navegación.

HTML
<nav>
Enlaces de navegación aquí...
</nav>

El elemento <nav> está destinado principalmente para secciones que consisten en bloques de navegación importantes (como la navegación en todo el sitio, etc.). Enlaces como los términos de servicio, la página de inicio y una página de derechos de autor no necesitan estar contenidos dentro de etiquetas <nav>. Estos tipos de enlaces a menudo aparecen en la sección del pie de página del documento. Si es así, marcarlos dentro de etiquetas <footer> es suficiente (es decir, no es necesario incluirlos en etiquetas <nav>).

Ejemplos de Etiqueta NAV

Contexto Básico de la Etiqueta

Aquí hay dos ejemplos que muestran dónde puede ubicarse el elemento <nav> dentro de un documento HTML. Estos son simplemente ejemplos, el elemento no está restringido a estos contextos. El elemento <nav> puede aparecer en cualquier lugar donde se espere “contenido de flujo” (básicamente, en cualquier lugar dentro del elemento <body>).

Dentro de un Elemento <header>

En este ejemplo, el elemento <nav> aparece dentro del elemento <header>.

See the Pen Nav dentro de <header> by Alex (@htmldesdecero) on CodePen.

En cualquier lugar dentro del elemento <body>

En este ejemplo, el elemento <nav> aparece por sí solo dentro del cuerpo (body) de un documento HTML. Como se mencionó anteriormente, el elemento <nav> puede aparecer en cualquier lugar donde se espere “contenido de flujo” (flow content), lo que básicamente significa en cualquier parte dentro del elemento <body>.

See the Pen Nav en <body> by Alex (@htmldesdecero) on CodePen.

Listas

Los elementos de navegación que aparecen como una lista deben incluirse dentro de una lista HTML. Aquí, los elementos de navegación aparecen dentro de un elemento <ul> que está dentro de un elemento <nav>.

HTML
<nav>
<ul>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/javascript/" target="_blank">JavaScript</a></li>
<li><a href="/sql/tutorial/" target="_blank">SQL</a></li>
</ul>
</nav>

Añadiendo Estilos

Las listas de navegación se pueden estilizar para que parezcan más una navegación que una lista de viñetas.

En este caso, utilizamos CSS para aplicar estilos a los elementos que están dentro del elemento <nav>.

See the Pen Nav con Estilos by Alex (@htmldesdecero) on CodePen.

Atributos

Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo debería aparecer o comportarse el elemento.

El elemento <nav> acepta los siguientes atributos.

AtributoDescripción
Ninguno 

Atributos Globales

Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes usar estos atributos con la etiqueta <nav>, así como con todas las demás etiquetas HTML.

  • accesskey
  • autocapitalize
  • class
  • contenteditable
  • data-*
  • dir
  • draggable
  • hidden
  • id
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • part
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate

Para obtener una explicación completa de estos atributos, consulta los Atributos Globales de HTML5.

5/5 - (1 voto)