El elemento header
Recientemente, hemos visto un creciente interés en HTML5 y su adopción por profesionales de la web. Dentro de la especificación de HTML5 podemos ver que ha habido un número significativo de nuevas etiquetas agregadas, y una de ellas, el elemento <header>, será cubierta en este post.
Si estás acostumbrado a ver <div id="header"> en una gran mayoría de los sitios que visitas, ahora con HTML5 esto ya no es necesario; podemos añadir un poco más de valor semántico con el elemento <header>.
¿Qué representa este elemento?
De acuerdo con la especificación, el elemento header representa "un grupo de ayudas de introducción o a la navegación".
Además, añade la siguiente nota:
Un elemento header está destinado a contener, por lo general, el título de la sección (un elemento h1-h6 o un elemento hgroup), pero esto no es obligatorio. El elemento header también se puede utilizar para envolver una tabla de contenidos de una sección, un formulario de búsqueda o los logos correspondientes.
Es importante señalar que el elemento <header> no estructura el contenido y no introduce una nueva sección.
Por supuesto, no debe ser confundido con el elemento <head>.
¿Dónde podemos utilizar este elemento?
El lugar obvio para comenzar sería al principio de la página. Podemos empezar con algo como lo siguiente, que incluye el título principal de la página:
<header>
<h1>El título más importante en esta página</h1>
<p>Con alguna información adicional</p>
</header>Un punto importante a destacar es que no está limitado el uso a un elemento <header> por cada sitio. Podemos utilizar varios encabezados, donde cada uno de ellos será el <header> de esa sección del documento. Por lo tanto, podríamos tener lo siguiente:
<header>
<h1>El título más importante en esta página</h1>
<p>Con alguna información adicional</p>
</header>
<article>
<header>
<h1>Título del artículo</h1>
<p>Por Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>Hay que tener en cuenta el uso de dos elementos <h1> dentro de este trozo de código. Esto es perfectamente válido en HTML5, pero causará problemas de accesibilidad, por lo que hay que tener cuidado si tenemos un gran número de artículos en una página. Cubriremos esto con más detalle en otro post.
Estilos de los nuevos elementos
Las últimas versiones de los principales navegadores reconocen estas nuevas etiquetas de HTML5, pero versiones anteriores a IE9 no las reconocen, por lo que no se les podrá aplicar estilos, aunque el contenido se mostrará correctamente. Para evitar esto, podemos hacer uso de Javascript:
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
</script>
<![endif]-->Añadiendo este código con el comentario condicional en la sección <head> de la página, el navegador podrá renderizar estos nuevos elementos. Sin embargo, tiene el inconveniente de requerir que el usuario tenga activado el Javascript en su navegador.
Por otra parte, CSS asume que todas estas etiquetas son elementos de línea, por lo que debemos indicarle explícitamente al navegador que se trata de elementos de bloque:
header, nav, section, article, aside, footer {display:block;}Tras haberlo incluido todo, la página debe mostrarse correctamente en todos los navegadores.
Conclusión
En resumen, el elemento <header> nos da una gran valor semántico para describir la cabecera de la página o de una sección.
