HTML5 – Etiqueta Header

Normalmente todas las páginas Web suelen tener una cabecera. Ésta suele encontrarse en la parte superior de la página, y en ella suele aparecer el logo o el título de la página y, a lo mejor, un subtitulo que describe el contenido de la página. En HTML4.01 para definir la cabecera se utilizaban divs y se le asignaba una clase llamada header o similar. De esta manera utilizábamos divs tanto para definir la cabecera como el contenido de la página como el pie de página.

En HTML5 se introduce la etiqueta header, la cual tiene únicamente un valor semántico. header se utiliza para especificar una introducción, o un grupo de elementos de navegación en el documento, normalmente mediante la inclusión de etiquetas de título (h1-h6 o el elemento hgroup). No obstante, también puede ser utilizada para delimitar la tabla de una sección de contenidos, un formulario de búsqueda o logos de cierta importancia, de manera que no sólo la utilizaremos en la cabecera de la página sino que deberá ser utilizada en todas las partes de la página en la que añadamos una cabecera.

Al ser una etiqueta semántica un usuario normal no sabrá si hemos utilizado la etiqueta header o un div, ya que visualmente no existirá ninguna diferencia. El principal avance de la etiqueta header es de cara al SEO. Explicado de una manera muy sencilla, podríamos decir que anteriormente, los motores de búsqueda no sabían si el contenido de un div pertenecía a la cabecera o al pie de página, lo tenían que adivinar. Ahora con la etiqueta header, y el resto de etiqueta semánticas, los motores de búsqueda saben seguro que el contenido de esta etiqueta corresponde a una cabecera y no a un pie de página. Y esto es muy importante ya que la cabecera tiene más peso en términos de SEO que el pie de página.