Teoría
Teoría

La etiqueta nav: la navegación principal

¿Recuerdas el encargo del instructor Cupcake? Nuestro sitio tendrá una página principal y entradas de blog. Por eso, la página principal necesita un bloque de navegación que permita llegar a las entradas.

La etiqueta <nav>, abreviatura del inglés «navigation», identifica una sección con la navegación principal. Suele contener enlaces a otras páginas o a distintas partes de la página actual. Por ejemplo:

<nav>
  Primera entrada, segunda entrada, archivo de entradas
</nav>

Aprenderemos a crear enlaces en las próximas partes. Por ahora agregaremos una sección de navegación a la página principal. Será exclusiva de esta página, así que la pondremos dentro del contenido principal.

No hace falta envolver en <nav> todos los grupos de enlaces. Por ejemplo, un pequeño bloque de enlaces auxiliares dentro de <footer> no necesita esta etiqueta adicional.

Además de enlaces, <nav> puede contener párrafos, encabezados, listas y otros contenidos.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Mi primer sitio web</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> Encabezado del sitio </header> <main> <section> ¡Hola a todos! Te doy la bienvenida a mi primer sitio web. Hasta hace poco no sabía qué hacía alguien que se dedica a la maquetación web. Ahora encontré estos ejercicios de HTML y CSS y quiero dedicarme a eso. Incluso tengo un instructor, Cupcake, que no me dejará distraerme y seguirá mis avances. Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros. </section> <section> Sección de habilidades </section> </main> <footer> Pie de página del sitio </footer> </body> </html>

ObjetivosRealizado

Dentro de <main>, antes de la primera sección, agrega una etiqueta <nav> con el texto Navegación.