Etiqueta nav de HTML

<nav>

Esta etiqueta es un elemento de lista. Dominar esta parte del diseño de paginas web te ayudará a realizar un trabajo más presentable.

¿Qué hace <nav>?

El elemento <nav> identifica un grupo de enlaces de navegación. Los enlaces dentro de un elemento <nav> pueden apuntar a otras páginas web o a diferentes secciones de la misma página web.

Contenido:

1 Ejemplo de código

2 Menús de navegación del edificio

2.1 Consejos de uso

2.2 Sugerencias de diseño

3 Soporte de navegador para nav

4 Atributos de nav

Ejemplo de código

<nav>

<a href="/ejemplo-facts/"> Ejemplo Flamingo </a>

&bull;

<a href="/ejemplo-food/"> Comida Ejemplo </a>

&bull;

<a href="/ejemplo-species/"> Especies de Ejemplo </a>

Curso de Java

&bull;

<a href="/ejemplo-habitat/"> Ejemplo Habitat </a>

&bull;

<a href="/ejemplo-mail/"> Contáctenos </a>

</nav>

Construcción de menús de navegación

En HTML 4, la codificación de un menú de navegación horizontal requería código HTML y CSS, de ahí que nuestra sugerencia sea que tomes un curso de CSS. La lista de enlaces debería codificarse dentro del elemento ul y, a continuación, aplicar un estilo para crear el diseño horizontal. La etiqueta nav es un nuevo elemento que facilita mucho la creación de un menú de navegación. Crea un menú ordenado y horizontal de enlaces de texto y ayuda a que el software de lectura de pantalla identifique correctamente las áreas de navegación principal en un documento.

Sugerencias de uso

Puedes tener varias listas de navegación en la misma página o documento, pero no tienes que utilizar el elemento nav para todos los vínculos del documento. Nav está mejor reservado para las áreas de navegación principal, como el menú principal en la parte superior de una página o sección. Los enlaces dentro de un navegador pueden codificarse dentro de una lista ul, o simplemente codificados como enlaces separados, sin el elemento ul. Para una completa compatibilidad hacia atrás, se recomienda la opción ul para que la lista se muestre correctamente en los navegadores antiguos.

Sugerencias de diseño.

Para mayor claridad, lo mejor es utilizar un separador entre enlaces. Esto ayuda a que cada elemento de la lista sea distinto de los que lo rodean. En nuestro ejemplo de código, hemos utilizado & bull; para este propósito.

Curso de CSS

En una siguiente nota te seguiremos hablando del tema, y te mencionamos que seguiremos trabajando en nuestro curso de java.