Elemento header

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento header contiene al encabezado de una sección o documento, donde se colocan habitualmente los encabezados, los vínculos de navegación, los formularios de búsqueda, los logos, las tablas de contenidos, las introducciones, etc. En muchos casos, los contenidos del encabezado de un documento son consistentes a lo largo de todo el sitio.

Los autores no deben confundir a los elementos header y head. Mientras que el elemento head provee metadatos para el documento, header contiene un grupo de elementos introductorios o de navegación.

Cuando un elemento header es declaracdo dentro de un elemento de seccionamiento (como article o section) representa un encabezado en el ámbito de ese elemento. De lo contrario (cuando pertenece al elemento body) representa un encabezado para el documento entero.

Ejemplos

Nuetsro primer ejemplo usa un elemento header para agrupar un logo, el nombre de la compañía y un formulario de búsqueda. Es muy común encontrar este formato en casos reales.

<header>
  <img src="../../../images/falling-star-logo.png">
  <h1>La estrella fugaz</h1>
  <form action="search.php">
    <input type="text">
    <input type="submit" value="Buscar">
  </form>
</header>

Ahora, el encabezado de este documento muestra algunos vínculos de navegación (apropiadamente encerrados en un elemento nav) y una tabla de contenidos.

<header>
  <nav>
    <a href="/">Inicio</a> -
    <a href="/recipes">Recetas</a> -
    <a href="/contact">Contáctame</a>
  </nav>
  <h1>Risotto</h1>
  <h2>Tabla de contenidos</h2>
  <ul>
    <li>Ingredientes</li>
    <li>Proceso</li>
    <li>Commentarios</li>
  </ul>
</header>

En nuestro tecer ejemplo, declararemos un elemento article con su propio encabezado (header). En contraste con los ejemplos previos, en este caso el elemento header sólo afecta a la sección que lo contiene.

<article>
  <header>
    <h1>El asesino del hijo de Bill Cosby confiesa</h1>
    <p id="intro">La apelación heacha por el estudiante de secundaria Mikail Markhasev ha sido cancelada a petición suya.</p>
  </header>
  <p>Declarando que quería hacer lo correcto, el hombre condenado por el asesinato del único hijo de Bill Cosby's, Ennis, ha escrito una carta a la oficina general de abogados de California confesando el crimen y solicitando que su apelación de 1998 sea desestimada...</p>
</article>

El asesino del hijo de Bill Cosby confiesa

La apelación heacha por el estudiante de secundaria Mikail Markhasev ha sido cancelada a petición suya.

Declarando que quería hacer lo correcto, el hombre condenado por el asesinato del único hijo de Bill Cosby's, Ennis, ha escrito una carta a la oficina general de abogados de California confesando el crimen y solicitando que su apelación de 1998 sea desestimada...

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.