Docs ejecutables de HTML: Header en HTML

Q: ¿Qué diferencia hay entre head y header en HTML?

es la parte invisible del documento, con el , las etiquetas y los enlaces a hojas de estilo, y hay exactamente uno. es contenido visible dentro de , y una página puede tener varios.

Q: ¿Una página puede tener más de un elemento header?

Sí. Una página suele tener una cabecera del sitio, y cada o puede tener su propio para su título y su información. Solo un header que no está dentro de article, aside, main, nav o section cuenta como banner de la página para los lectores de pantalla.

Q: ¿Cómo hago que un header se quede arriba al desplazarse?

Dale position: sticky; top: 0; más un color de fondo y un z-index, para que el contenido pase por debajo. Sticky solo funciona mientras el padre del header es más alto que el header, y un ancestro con overflow: hidden impide que se quede fijo respecto a la página.

Cómo hacer un header en HTML

Envuelve la parte superior de tu página (logo, nombre del sitio, menú principal) en un elemento <header>. Es una caja de bloque sin aspecto por defecto, así que unas pocas líneas de CSS la convierten en una barra:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site header</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .site-header {
      display: flex; align-items: center; gap: 16px;
      padding: 12px 20px; background: #111827; color: #fff;
    }
    .logo { font-weight: 700; font-size: 20px; margin-inline-end: auto; }
    .site-header a { color: #e5e7eb; text-decoration: none; }
    .site-header a:hover { color: #fff; text-decoration: underline; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="logo">Acme</div>
    <nav>
      <a href="#">Products</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
    </nav>
    <a class="cta" href="#">Sign up</a>
  </header>
  <main style="padding: 20px;">
    <h1>Welcome</h1>
    <p>The page content starts here.</p>
  </main>
</body>
</html>

margin-inline-end: auto en el logo empuja el menú y el botón al otro extremo de la barra. Quita el elemento <style> y sigues teniendo un header: lo que lo convierte en uno es la etiqueta, no el fondo oscuro.

header vs head vs h1

Tres nombres que suenan parecido y hacen trabajos distintos:

Elemento	Dónde	Visible	Cuántos
`<head>`	Directamente dentro de `<html>`, antes de `<body>`	No: contiene `<title>`, `<meta>`, `<link>`	Exactamente uno
`<header>`	Dentro de `<body>`	Sí: contenido introductorio de una página o sección	Cualquier número
De `<h1>` a `<h6>`	En cualquier parte de `<body>`	Sí: un encabezado	Cualquier número

El <head> de abajo fija el título de la página que el navegador muestra en su pestaña. Todo lo que ves en la vista previa viene de <body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This text is in the head</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <header style="border: 2px solid #2563eb; padding: 0 12px;">
    <h1>This h1 is inside a header</h1>
    <p>The header is visible content.</p>
  </header>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title from the head: ' + document.title;
  </script>
</body>
</html>

Un header a menudo contiene un encabezado, pero no tiene por qué, y un encabezado no necesita un header alrededor.

Headers dentro de artículos

<header> introduce su article o section más cercano, no solo la página. Una lista de entradas de blog en la que cada entrada tiene su propio header es válida y habitual:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article headers</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    article header { border-bottom: 1px solid #e5e7eb; }
    article h2 { margin: 12px 0 4px; }
    .meta { color: #6b7280; font-size: 14px; margin: 0 0 10px; }
  </style>
</head>
<body>
  <article>
    <header>
      <h2>Why tabs beat spaces</h2>
      <p class="meta">By Sam, <time datetime="2026-09-20">Sep 20</time></p>
    </header>
    <p>A short argument.</p>
  </article>
  <article>
    <header>
      <h2>Why spaces beat tabs</h2>
      <p class="meta">By Lee, <time datetime="2026-09-22">Sep 22</time></p>
    </header>
    <p>A shorter reply.</p>
  </article>
</body>
</html>

Para los lectores de pantalla, solo el header de nivel de página (uno que no está dentro de article, aside, main, nav o section) se convierte en el landmark banner. Los headers de los artículos son grupos normales, así que no acabas con varios banners.

Header fijo (sticky)

position: sticky mantiene el header arriba mientras el contenido de debajo se desplaza. Desplázate dentro de la caja de abajo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .viewport { height: 220px; overflow-y: auto; border: 2px solid #e5e7eb; }
    header {
      position: sticky; top: 0; z-index: 1;
      background: #2563eb; color: #fff; padding: 10px 14px; font-weight: 600;
    }
    .content p { margin: 0; padding: 14px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="viewport">
    <header>I stay at the top</header>
    <div class="content">
      <p>Row 1</p><p>Row 2</p><p>Row 3</p><p>Row 4</p>
      <p>Row 5</p><p>Row 6</p><p>Row 7</p><p>Row 8</p>
    </div>
  </div>
</body>
</html>

Tres detalles lo hacen funcionar: top: 0 (sticky no hace nada sin un desplazamiento), un color de fondo (si no, las filas se ven a través) y z-index para que el contenido posicionado no se pinte encima. En una página real, la caja que se desplaza es la propia página, así que el header va directamente en <body>.

Un header con position: fixed también se queda en su sitio, pero sale del flujo de la página, así que el contenido se desliza por debajo y necesita padding arriba. Sticky conserva su espacio en el diseño.

Qué puede ir en un header

Un header puede contener casi cualquier contenido: encabezados, una imagen de logo, un <nav>, un formulario de búsqueda, un botón. No puede contener otro <header> ni un <footer>, y no puede estar dentro de un <footer>, un <address> u otro <header>.

<header>
  <a href="/"><img src="logo.svg" alt="Acme home"></a>
  <nav aria-label="Main">...</nav>
  <form role="search">...</form>
</header>

Cuando el logo es un enlace a la página de inicio, su texto alt debe decir a dónde va el enlace ("Acme home"), porque es lo que anuncia un lector de pantalla.

Errores comunes

Confundir <header> con <head>. Los metadatos van en <head>; el contenido visible nunca.
Usar <header> para cada encabezado. Un encabezado solo no necesita un header alrededor. Usa <header> cuando haya un grupo de contenido introductorio.
Un header sticky sin fondo. El texto de la página se ve pasar a través de él. Define un background.
Sticky que no se queda fijo. Un ancestro con overflow: hidden u overflow: auto se convierte en la caja de desplazamiento del sticky, así que el header se queda fijo dentro de esa caja (o no se queda). Revisa los ancestros.
Poner el menú del sitio en un <div> dentro del header. Usa <nav> para que quienes usan lectores de pantalla puedan saltar a él.

Preguntas frecuentes

¿Qué es la etiqueta header en HTML?

<header> es un elemento semántico para contenido introductorio: el logo y el menú del sitio en la parte superior de la página, o el título y la autoría al principio de un artículo. Es una caja de bloque normal sin estilo por defecto.

¿Qué diferencia hay entre head y header en HTML?

<head> es la parte invisible del documento, con el <title>, las etiquetas <meta> y los enlaces a hojas de estilo, y hay exactamente uno. <header> es contenido visible dentro de <body>, y una página puede tener varios.

¿Una página puede tener más de un elemento header?

Sí. Una página suele tener una cabecera del sitio, y cada <article> o <section> puede tener su propio <header> para su título y su información. Solo un header que no está dentro de article, aside, main, nav o section cuenta como banner de la página para los lectores de pantalla.

¿El nav va dentro del header?

Puede ir, y suele ir cuando el menú principal está en la parte superior de la página. Poner <nav> fuera de <header> también es válido; elige lo que encaje con tu diseño.

¿Cómo hago que un header se quede arriba al desplazarse?

Dale position: sticky; top: 0; más un color de fondo y un z-index, para que el contenido pase por debajo. Sticky solo funciona mientras el padre del header es más alto que el header, y un ancestro con overflow: hidden impide que se quede fijo respecto a la página.

Conceptos relacionados