El elemento header HTML

El elemento header fue introducido en HTML5 para representar contenido de introducción y ayudas de navegación para una sección. En este post describiré los aspectos y especificaciones más importantes para a utilizarlo correctamente.

¿Qué representa?

De acuerdo con las especificaciones, un elemento header representa contenido de introducción y/o ayudas de navegación para la sección más cercana de la que es descendiente. Elementos que señalan una sección son los especificados en secciones de contenido y secciones raíz. Por ejemplo, body, main, section y article. Cuándo header es descendiente directo de body, el header se aplica a toda la página.

El elemento header contiene típicamente la cabecera de la sección (h1 – h6 o elemento hgroup) y alguna información suplementaria pero también puede contener ayudas de navegación como, por ejemplo, una tabla de contenidos de la sección, un cuadro de búsqueda o un logotipo o imagen.

Según el modelo de contenido de este elemento, se espera que esté dentro del flujo natural del documento y que contenga contenido palpable. No puede contener elementos main, footer u otros header. Una misma sección sólo puede contener un elemento header directamente descendiente, pero puede contener otras secciones con sus header correspondientes. No hay límite máximo ni mínimo de elementos header que puede haber en una misma página.

En cuánto a accesibilidad, el elemento header admite el rol «banner» (valor por defecto) y «presentation».

Atención: No confundáis <header> con <head>

¿Cuándo y cómo se utiliza?

El primer lugar en una página web dónde se utiliza header es al comienzo de las misma, tras la apertura de body, que es la primera sección que nos encontramos. Cómo dijimos antes, el header de la sección body se aplica a toda la página; puede contener, por ejemplo, el logotipo de la web y la barra de navegación. Un ejemplo típico sería:

<!DOCTYPE html>
<html>
<head>
   ....
<body>
   <header>
       <h1>El nombre de mi web</h1>
       <img src="milogotipo.jpg">
       <nav>
          <ul>
              <li>Enlace menu 1</li>
              <li>Enlace menu 2</li>
          </ul>
       </nav>
    </header>
.....Resto de la página

Otro ejemplo típico sería en el título de un artículo con información sobre su autor y fecha:

<article>
    <header>
        <h1>Título del artículo</h1>
        Por Fulanito de Tal el 16 de Marzo de 3205
    </header>

El siguiente ejemplo sería erróneo por haber dos header hijos de la misma sección:

<article>
    <header>
        <h1>Título del artículo</h1>
    </header>
    <header>Por Fulanito de Tal el 16 de Marzo de 3205</header>

Referencia