La siguiente sección que vamos a explicar es la Barra de Navegación. Esta barra es generada en HTML5 con la etiqueta <nav>.
<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»utf-8″>
<meta name=»description» content=»Ejemplo de HTML5″>
<meta name=»keywords» content=»HTML5″>
<title>La evolución humana</title>
<link rel=»stylesheet» href=»archivoestilos.css»>
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>Tutoriales</li>
<li>Imágenes</li>
<li>Vídeos</li>
<li>Contacto</li>
</ul>
</nav>
</body>
</html>
Como vemos en el código anterior, el elemento <nav> se encuentra dentro de las etiquetas <body>, pero después de las etiquetas de cierre de header (</header), no entre las etiquetas <header>. Esto es porque el <nav> no forma parte del header, si no que es una nueva sección.
Un ejemplo de esta versatilidad es la etiqueta <nav>, que podemos insertar o bien dentro del elemento <header> o bien dentro de cualquier otra sección del cuerpo. El elemento <nav> está hecho para incluir ayudas a la navegación como el menú principal o los bloques principales de navegación y se debería utilizar para este propósito.
En este ejemplo, vamos a hacer una lista con las opciones de menú de nuestra página web. Entre las etiquetas <nav>, existen dos elementos que se utilizan para crear una lista. Utilizamos el elemento <ul> para definir la lista. Dentro de estas etiquetas <ul> vemos varias etiquetas <li> con diferente texto, que representan las opciones de menú. Estas etiquetas <li>, se utilizan para definir cada item de la lista.