Uno de los elementos semánticos que podemos encontrar en HTML5 es nav. Este elemento nos permitirá definir navegaciones en HTML5. Las navegaciones en HTML5 nos permiten agrupar un conjunto de enlaces que tengan una finalidad: ya sea la navegación principal de nuestro site, una navegación interna a contenidos de la página, una navegación de migas de pan (breadcrumbs),…
A diferencia de HTML4, en HTML5 el elemento nav nos proporciona esa semántica sobre el conjunto de enlaces de navegación, el cual antes conseguíamos con una secuencia de capas div.
Para crear navegaciones en HTML5 con nav deberemos de incluir directamente el elemento.
<nav>...</nav>
Dentro del elemento nav vamos a incluir una lista de enlaces mediante un elemento ul.
<nav> <ul> <li><a href="https://lineadecodigo.com">Línea de Código</a></li> <li><a href="http://www.manualweb.net">Manual Web</a></li> <li><a href="http://w3api.com">W3Api</a></li> </ul> </nav>
Vemos que el contenido de la navegación en HTML5 lo conseguimos mediante esta lista de enlaces en el elemento nav.
El elemento nav puede ir en cualquier parte de la página, ya sea dentro del cuerpo o body, cabeceras o header, pies de página o footer,…
De esta manera podemos encontrar nuestro menú de navegación, por ejemplo, en un header:
<header><nav> <ul> <li><a href="https://lineadecodigo.com">Línea de Código</a></li> <li><a href="http://www.manualweb.net">Manual Web</a></li> <li><a href="http://w3api.com">W3Api</a></li> </ul> </nav></header>
Ya hemos visto lo sencillo que es crear navegaciones en HTML5. ¿Qué ejemplos se te ocurren?
