La etiqueta HTML <header> representa contenido introductorio para el elemento de contenido de sección más cercano o el elemento raíz de sección.

El contenido de sección es contenido que define el alcance de los encabezados y pies de página. Los siguientes elementos se categorizan como contenido de sección: <article>, <aside>, <nav>, <section>

Los elementos raíz de sección pueden tener sus propios contornos, pero las secciones y encabezados dentro de estos elementos no contribuyen a los contornos de sus antecesores. Las siguientes etiquetas se categorizan como elementos raíz de sección (<blockquote>, <body>, <fieldset>, <figure>, <td>).

Los encabezados pueden contener encabezados, subencabezados, información de versión, formularios de búsqueda, logotipos, controles de navegación, etc.

Sintaxis de Header

La etiqueta <header> se escribe como <header></header> con el contenido del encabezado insertado entre las etiquetas de inicio y fin.

Así:

HTML
<header>
    Contenido del encabezado...
</header>

Ejemplos con <Header>

Visión General

See the Pen Visión general HTML by Alex (@htmldesdecero) on CodePen.

Elementos dentro del elemento <header>

Normalmente, un elemento <header> contendrá un encabezado para la sección (aunque esto no es obligatorio). Un elemento <header> también podría contener elementos de navegación, búsqueda, logotipos y otro contenido.

Encabezados del Documento

En este ejemplo, el elemento <header> contiene un encabezado para todo el documento. El documento contiene tres artículos separados sobre el mismo tema.

See the Pen Untitled by Alex (@htmldesdecero) on CodePen.

Encabezados de Artículo

En este ejemplo, el elemento <header> está contenido dentro de un elemento <article>. Esto significa que el elemento <header> se aplica al elemento <article> (y no necesariamente a todo el documento).

See the Pen Encabezados de Artículo (Header) by Alex (@htmldesdecero) on CodePen.

Logotipo y Formulario de Búsqueda

En este ejemplo, el elemento <header> contiene un logotipo y un formulario de búsqueda.

See the Pen Header Logo Buscar by Alex (@htmldesdecero) on CodePen.

Atributos

Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo debería aparecer o comportarse el elemento.

El elemento <header> acepta los siguientes atributos.

AtributoDescripción
Ninguno 

Atributos Globales

Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes utilizar estos atributos con la etiqueta <header>, así como con todas las demás etiquetas HTML.

  • accesskey
  • autocapitalize
  • class
  • contenteditable
  • data-*
  • dir
  • draggable
  • hidden
  • id
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • part
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate

Para obtener una explicación completa de estos atributos, consulta los atributos globales de HTML 5.

5/5 - (2 votos)