La nueva etiqueda HEADER para las cabeceras en HTML5
Las etiquetas <header> y su cierre </header> quizás sean mucho más sencillas de entender que las dos anteriores. Se encargan de indicar a los navegadores que lo que contienen es la cabecera de la página y que dentro seguramente llevarán lo típico, algún logotipo, el título de la página, quizás una descripción de la misma y poco más. La norma define a la cabecera como un grupo de ayudas a la navegación. En definitiva, el HTML5 nos indica que todo lo que antes teniamos en la cabecera ha de ir ahora entre esas dos etiquetas, no más.
No es una etiqueta obligatoria, aunque debemos usarla si realmente nuestras páginas tienen algún bloque de código que se pueda entender como "cabecera".
Además de los elementos citados, un header podría contener un menú de ayuda a la navegación, una tabla de contenidos, un formulario de búsqueda, etc. Su contenido no es tan extricto
Al tratarse de etiquetas semanticas, nos da igual la posición que ocupen dentro de nuestra página. un header será un header esté donde esté. Quizás hayas diseñado una web en la que el título y la descripción de la web junto con algunos enlaces o ayudas a la navegación los tengas situados en una barra lateral. Ese bloque continuará siendo un encabezado o header, pues corresponde con el significado semántico de header y la posición que ocupa ya os digo que no nos importa en ese aspecto.
Por otro lado, el header no se limita a identificar la cabecera de una página web, sino que puede usarse también para recoger la cabecera de una sección o varias dentro del contenido. Si por ejemplo en una web con cabecera, hay dentro un conjunto de informaciones a los que crees que le puede venir bien un título, con breve descripción y ayudas a la navegación (un mini header, no?) podrías añadir otro par de etiquetas <header> y </header> para ese mini header.
<header>
<h1>TITULO DE LA WEB</h1>
<h2>Breve descripción de la página web.</h2>
<ul>
<li><a href="inicio.html">Inicio</a></li>
<li><a href="unaseccion.html">Una Sección</a></li>
<li><a href="otraseccion.html">Otra Sección</a></li>
</ul>
</header>
.......
Estructura HTML5:
