Referencia de etiquetas

Etiqueta header en HTML: cabecera de página o sección

La etiqueta <header> representa contenido introductorio o ayudas de navegación de una página o sección. Úsala para reunir, por ejemplo, el nombre del sitio y su navegación, o el título y la fecha de un artículo: así identificas una cabecera por su función, además de por su apariencia.

Ejemplo mínimo: una cabecera con navegación

<header>
  <p>Aula Web</p>
  <nav aria-label="Principal"><a href="/">Inicio</a></nav>
</header>

Se muestran «Aula Web» y el enlace «Inicio». <header> agrupa esa introducción; <nav> identifica la navegación y aria-label="Principal" le da un nombre accesible. La disposición, los colores y la separación dependen de CSS: esta etiqueta no crea por sí sola una barra horizontal ni una cabecera fija.

Para probar el fragmento, colócalo al principio del <body> del documento completo que aparece más abajo, sustituyendo su cabecera global. La dirección / apunta a la raíz del sitio donde se sirva; si abres el archivo localmente, puedes reemplazarla por #guia para visitar el artículo del ejemplo sin necesitar un servidor.

Sintaxis y contexto válido

Se escribe con apertura <header> y cierre </header>; ninguna de las dos etiquetas se puede omitir. Admite contenido de flujo, como títulos, párrafos, enlaces, imágenes o navegación. Puede aparecer donde el elemento padre permita ese contenido, por ejemplo en <body>, <article> o <section>.

No puede tener descendientes <header> ni <footer>, aunque haya otro contenedor intermedio. Tampoco puede estar dentro de <address> o de otro <footer>, por las restricciones de esos elementos. Un <p> no admite esta estructura.

La cabecera no crea una sección nueva ni determina el nivel de sus títulos. Suele contener un encabezado descriptivo, pero este no es obligatorio, como demuestra el ejemplo mínimo. Estas reglas se recogen en el HTML Living Standard para <header>.

Guarda este código como cabeceras.html, con codificación UTF-8, y ábrelo en el navegador. Es un documento completo: no necesita imágenes, hojas de estilo, scripts ni rutas externas.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Guía de estudio | Aula Web</title>
  </head>
  <body>
    <header class="cabecera-sitio">
      <h1>Aula Web</h1>
      <nav aria-label="Principal">
        <a href="#guia">Leer la guía de estudio</a>
      </nav>
    </header>

    <main>
      <article id="guia">
        <header class="cabecera-articulo">
          <h2>Prepara tu primera página</h2>
          <p>Publicado el <time datetime="2026-10-03">3 de octubre de 2026</time>.</p>
        </header>
        <p>Empieza con un título claro y un párrafo que explique tu tema.</p>
        <p>Después, abre el archivo en el navegador y revisa el resultado.</p>
      </article>
    </main>
  </body>
</html>

Primero aparece «Aula Web», seguido del enlace a la guía. Después se ve el título del artículo, su fecha y dos párrafos. El primer <header> pertenece a la página; el segundo introduce únicamente su <article>. Son dos cabeceras legítimas: la del artículo queda fuera de la global y no incumple la prohibición de anidarlas.

Pulsa Tab hasta llegar al enlace y actívalo con Enter: la dirección termina en #guia y el destino es el artículo. El título del sitio es <h1> y el de esta pieza es <h2> porque aquí se presenta dentro de esa página. El nivel procede de esas etiquetas, no de estar dentro de <header>.

Para comparar, sustituye la apertura y el cierre de la cabecera global por <div class="cabecera-sitio"> y </div>. El contenido sigue visible, pero deja de identificarse como cabecera global. Si retiras solo ambas etiquetas, conservando sus hijos, también permanecen el título y el enlace. La introducción pierde su agrupación semántica. Al eliminar las etiquetas de la cabecera interna, el <h2> conserva su nivel y la fecha sigue visible.

Un hito o landmark es una región que las tecnologías de asistencia pueden usar para recorrer una página. En el documento anterior, la cabecera global tiene implícitamente el rol banner por su contexto en <body>.

Dentro de <article>, <aside>, <main>, <nav> o <section>, y de contenedores con roles equivalentes, la cabecera interna no es un banner. No añadas role="banner" a cada <header>: convertirías las introducciones locales en regiones globales. Para orientar al lector del artículo, proporciona un título descriptivo.

Comprueba el contexto real con el árbol de accesibilidad de las herramientas del navegador. Inspecciona las dos cabeceras del ejemplo: la global debe aparecer como banner; la interna no debe añadir otro. Si mueves la global dentro de <main>, también pierde ese papel. Revisa todos los antepasados, no solo el padre inmediato.

El borrador de HTML AAM distingue el mapeo de la cabecera global y el de una sección. El nombre de la agrupación interna y su anuncio pueden variar entre navegadores y tecnologías de asistencia; no hace falta reproducirlos con ARIA. La prueba también funciona al desactivar JavaScript, porque la estructura y el enlace son HTML nativo.

Diferencia entre head y header

<head> contiene metadatos del documento, como la codificación y <title>. El texto de <title> identifica la pestaña; no crea un título visible dentro de la página. <header> pertenece al contenido del <body> y reúne una introducción que se puede ver y leer.

En el ejemplo, «Guía de estudio | Aula Web» identifica la pestaña; «Aula Web» aparece en la página mediante <h1>. Para ampliar esta diferencia, consulta la guía de <head>.

Atributos y errores frecuentes

<header> no tiene atributos propios. Admite globales como class, para aplicar estilos, e id, para identificarlo o enlazarlo. position y background son propiedades CSS; no son atributos de la etiqueta. className es una propiedad del DOM usada desde JavaScript, distinta de escribir class en HTML.

Evita estos errores:

Anidar otra cabecera o un pie dentro de <header>: colócalos en el ámbito que les corresponda, fuera de él.
Elegir <header> solo porque una caja está arriba: usa un contenedor genérico si no introduce contenido ni navegación.
Esperar que quede fijo al desplazar la página: ese comportamiento se configura con CSS y no cambia su significado.
Confundir la cabecera con un encabezado: <header> agrupa contenido; <h1> a <h6> expresan títulos con nivel.

¿Puedo tener varios <header>? Sí, para ámbitos distintos, siempre que respetes el modelo de contenido. Varias cabeceras de artículos no implican varios hitos banner.

¿Header contiene metadatos? Los metadatos del documento van normalmente en <head>. Una fecha visible de publicación puede formar parte de la cabecera del artículo, como en este ejemplo.

<nav> reúne navegación; puede formar parte de una cabecera o aparecer fuera de ella. <hgroup> agrupa un título con texto relacionado, como un subtítulo; puede estar dentro de <header>. Un <article> delimita la pieza independiente cuya introducción estamos marcando. Un <footer> reúne información de cierre de su ámbito y debe quedar fuera de la cabecera.

Compatibilidad y fuentes

<header> está ampliamente disponible en los navegadores actuales. La referencia de MDN, consultada el 3 de octubre de 2026, distingue soporte del elemento y notas de accesibilidad. Contrasta el rol expuesto en el navegador que uses; el soporte visual del elemento no garantiza un anuncio idéntico en todos los lectores de pantalla.