<header> — Frontend Classroom

<header> es el elemento semántico que representa la cabecera de su sección más cercana. En el nivel de página — cuando aparece como hijo directo de <body> — es el bloque que contiene el logo del sitio, el título o nombre de la marca y la navegación principal. No es solo un contenedor decorativo: comunica al navegador, a los lectores de pantalla y a los motores de búsqueda que ese bloque cumple el rol de encabezado identificador de la unidad que lo contiene.

Antes de HTML5, este mismo propósito se expresaba con <div id="header"> o <div class="header">. El navegador no entendía nada del nombre — era solo texto para el desarrollador. Desde HTML5, <header> codifica esa intención directamente en el marcado, sin depender de convenciones de clase o comentarios. Cualquier lector de pantalla, motor de búsqueda o herramienta de análisis que encuentre un <header> sabe qué tipo de contenido tiene delante.

Un detalle que sorprende a quienes vienen de otros contextos: <header> no es único por página. Puede aparecer tantas veces como sea necesario — una por cada sección que requiera un encabezado identificador. Un <article> puede tener su propio <header> con el título del artículo, la fecha de publicación y el autor. Una <section> puede tener el suyo. Solo el <header> de nivel de página (hijo directo de <body>) tiene el rol de landmark banner; los internos tienen un rol genérico.

Cómo funciona

<header> es un elemento de contenido de flujo que acepta cualquier contenido de flujo o de encabezado como hijo, excepto otro <header> o <footer> directamente anidados (no está permitido anidar <header> dentro de <header>). Su display por defecto es block, igual que <div>.

El rol de landmark depende de dónde está en el árbol del documento:

Hijo de <body>: genera el landmark ARIA banner. Los lectores de pantalla lo exponen como “encabezado del sitio” y permiten saltar directamente a él desde el menú de landmarks.
Anidado dentro de <article>, <aside>, <main>, <nav> o <section>: su rol pasa a ser genérico. No genera un landmark banner adicional — evita que haya múltiples landmarks banner en la misma página, lo que sería confuso para los usuarios de lectores de pantalla.

Modelo de contenido

<header> acepta contenido de flujo con una restricción: no puede contener <main> como descendiente. Sí puede contener <nav>, headings (<h1>–<h6>), <p>, <img>, formularios de búsqueda y prácticamente cualquier otro elemento de bloque o en línea.

La posición válida en el documento es dentro de cualquier elemento que acepte contenido de flujo. El contexto más típico es hijo directo de <body>, pero también dentro de <article> o <section>.

Sintaxis

<!-- Header de nivel de página -->
<header>
  <a href="/">
    <img src="logo.svg" alt="MiSitio">
  </a>
  <nav>
    <ul>
      <li><a href="/inicio">Inicio</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

<!-- Header interno de un artículo -->
<article>
  <header>
    <h2>Cómo aprender HTML semántico</h2>
    <p>Publicado el <time datetime="2026-06-17">17 de junio de 2026</time></p>
  </header>
  <p>El HTML semántico comunica el significado del contenido...</p>
</article>

Atributos

<header> no tiene atributos propios. Acepta todos los atributos globales de HTML (class, id, style, data-*, aria-*, etc.) como cualquier otro elemento HTML.

Rol de landmark y accesibilidad

El rol ARIA implícito de <header> cuando es hijo directo de <body> es banner. Este landmark le indica a los lectores de pantalla que el bloque es el encabezado principal del sitio web — no de una sección particular, sino del sitio completo.

Los usuarios de lectores de pantalla como NVDA, JAWS o VoiceOver pueden navegar entre landmarks con un atajo de teclado (en NVDA: D; en VoiceOver: W). Cuando la página tiene un <header> semántico, el lector puede anunciar “Bandera, inicio” o similar y el usuario llega directamente al encabezado sin recorrer el contenido anterior.

La regla del rol contextual: si <header> aparece dentro de <article>, <aside>, <main>, <nav> o <section>, pierde el rol banner y pasa a tener rol genérico. Esto es intencional: solo debe haber un landmark banner por página. Una página con diez <header> internos en artículos no genera diez landmarks banner — solo el de nivel de página lo hace.

Cuándo usar `<header>` / cuándo no

Situación	Qué usar
Logo + nombre del sitio + nav principal al tope de la página	`<header>` como hijo de `<body>`
Título + metadatos (fecha, autor) de un `<article>`	`<header>` dentro del `<article>`
Encabezado identificador de una `<section>`	`<header>` dentro de la `<section>`
Un heading `<h2>` solo, sin más elementos de cabecera	Directamente el `<h2>`, sin `<header>`
Un banner publicitario o imagen decorativa	No usar `<header>` — no cumple el rol de cabecera

No hace falta <header> si solo hay un heading. El wrapper adicional no aporta semántica extra. <header> es útil cuando agrupa el heading con otros elementos de identificación (logo, fecha, autor, búsqueda). Un <h2> solo dentro de <section> no necesita un <header> que lo envuelva.

Notas, gotchas e interacción

<header> no posiciona nada. Sin CSS, se apila verticalmente como cualquier elemento de bloque. Que aparezca “arriba” de la página es trabajo de CSS, no de la semántica del elemento. La semántica y el layout son ejes independientes.
El <h1> no tiene que ir dentro del <header>. Es recomendable que el <h1> de la página esté dentro del <main> — es el título del contenido, no del sitio. El logo o el nombre del sitio en el <header> no tiene que ser un <h1>.
Solo uno por nivel de anidado. Aunque <header> puede aparecer varias veces en el documento, no debería haber dos <header> que sean hermanos directos dentro del mismo elemento padre — sería redundante y confuso.
<head> ≠ <header>. <head> (sin r) es el elemento de metadatos del documento — title, meta, link. <header> (con r) es el encabezado visible de la página o sección. La confusión es frecuente cuando se empieza.

Vigente / legacy

<header> está completamente vigente desde HTML5 y tiene soporte universal. Su predecesor funcional, <div id="header"> o <div class="header">, es legacy desde HTML5 — cumple el mismo efecto visual pero no aporta semántica ni rol de landmark. No hay atributos específicos de <header> marcados como legacy.