Semánticamente el uso del elemento header nos permite definir una cabecera de documento en HTML5. De esta forma podemos identificar cuales son los elementos introductorios de la página.
En una cabecera de documento en HTML5 nos podemos encontrar elementos como el título, un menú de navegación, logo y en algunos casos un formulario de búsqueda. Si bien esto no está reglado estos son los elementos más comunes.
El elemento header es un elemento agrupador, por lo cual no tiene una representación explícita y su contenido es texto u otro elemento. El elemento header se utilizaría de la siguiente forma:
<header> ... </header>
Este elemento lo encontraremos, normalmente detrás del elemento body de las página webs, cuando este se esté utilizando para representar una cabecera de documento en HTML5.
Es importante que diferenciemos entre los que es la cabecera del documento definida mediante el elemento head> y la cabecera representada mediante el elemento header. En el primer caso utilizamos el elemento head> para definir la metainformación de la página así como un área para enlazar a nuestros scripts u hojas de estilo. Por otro lado el elemento header nos permite definir la cabecera del documento, aquella que tiene una representación visual y por lo tanto es renderizable.
Para completarlo, vamos a insertar dentro del elemento header> un título y un logo. Para ello nos apoyamos en los elementos h1 y img.
<header> <h1>Cabecera de documento HTML5</h1> <img src="logo.jpg" alt="Logo Línea de Código" /> </header>
De esta manera ya tenemos identificado semánticamente qué representa el título e imagen representativa de la página dentro de nuestra cabecera.
Ya habéis visto lo sencillo que es definir una cabecera de documento en HTML5.
