Entre todos los elementos HTML que conforman la web, es muy probable que haya una sección de enlaces que aglutine los enlaces que utilizamos para navegar por las diferentes páginas principales de la web. Aquí es donde nace la utilidad de la etiqueta <nav>.
La etiqueta <nav>
La etiqueta <nav> nos permite crear una sección que agrupe los enlaces de navegación por la página, es decir, una especie de <div> contenedor orientado a desplazarse por los diferentes lugares del sitio web.
Por ejemplo, este fragmento de código sería el de una agrupación de enlaces de navegación por la página, sin utilizar la semántica de la etiqueta de sección <nav>:
<div class="links">
<a href="https://manz.dev/">Inicio</a>
<a href="https://manz.dev/streams/">Streams</a>
<a href="https://manz.dev/setup/">Setup</a>
<a href="https://manz.dev/stickers/">Stickers</a>
</div>Por el contrario, si en lugar de utilizar el <div> utilizamos la etiqueta <nav>, se sobreentiende que los enlaces del interior son para desplazarse a las diferentes secciones del sitio web:
<nav>
<a href="https://manz.dev/">Inicio</a>
<a href="https://manz.dev/streams/">Streams</a>
<a href="https://manz.dev/setup/">Setup</a>
<a href="https://manz.dev/stickers/">Stickers</a>
</nav>Múltiples elementos <nav>
Es posible tener varios elementos <nav> en nuestro sitio, ya que por ejemplo, quizás necesitemos una segunda o tercera agrupación de enlaces de navegación porque visualmente están separados de los demás bloques. En ese caso, se pueden utilizar nuevos elementos <nav> para agrupar enlaces de navegación.
<div class="page">
<nav class="primary">
<h1>Navegación</h1>
<a href="https://manz.dev/">Inicio</a>
<a href="https://manz.dev/streams/">Streams</a>
<a href="https://manz.dev/setup/">Setup</a>
<a href="https://manz.dev/stickers/">Stickers</a>
</nav>
<nav class="secondary">
<h1>Enlaces secundarios</h1>
<a href="https://links.manz.dev/">Redes</a>
<a href="https://manz.dev/apoyo/">Apoyo</a>
<a href="https://manz.dev/cheatsheets/">CheatSheets</a>
</nav>
</div>No todos los grupos de enlaces de navegación deben estar en el interior de un elemento
<nav>. Por ejemplo, si un grupo de elementos de navegación ya está contenido por otro bloque semántico como<footer>o<header>, puede no ser necesario.
