Elemento header en HTML

El elemento <header> es un contenedor semántico que representa el contenido introductorio o un conjunto de enlaces de navegación en un documento HTML. Típicamente contiene elementos como un logotipo, título, barra de navegación, y otros elementos introductorios para su sección o para todo el sitio web.

<header>
  <h1>Mi Sitio Web</h1>
  <nav>
    <ul>
      <li><a href="#inicio">Inicio</a></li>
      <li><a href="#acerca">Acerca de</a></li>
      <li><a href="#contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

Características principales

Es un elemento semántico introducido en HTML5.
Puede existir más de un <header> en un documento HTML.
No debe colocarse dentro de un <footer>, <address> u otro elemento <header>.
Es un elemento de bloque que ocupa todo el ancho disponible.
No forma parte de la estructura de secciones del documento, sino que es un elemento de agrupación.

Usos comunes

Header de página completa

Se utiliza como cabecera principal de toda la página web:

<header>
  <img src="logo.png" alt="Logo de la empresa">
  <h1>Nombre de la Empresa</h1>
  <nav>
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/servicios">Servicios</a></li>
      <li><a href="/productos">Productos</a></li>
      <li><a href="/contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

Header dentro de secciones

También puede utilizarse dentro de otros elementos semánticos como <article>, <section> o <aside> para definir encabezados específicos:

<article>
  <header>
    <h2>Título del Artículo</h2>
    <p>Publicado el <time datetime="2025-03-21">21 de abril de 2025</time> por <a href="#">Nombre del Autor</a></p>
  </header>
  <p>Contenido del artículo...</p>
</article>

Header con barra de búsqueda y usuario

Un diseño común incluye elementos adicionales como búsqueda y acceso a cuenta:

<header>
  <div class="logo-container">
    <img src="logo.svg" alt="Logo de la empresa">
  </div>
  
  <nav class="main-nav">
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/tienda">Tienda</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/nosotros">Nosotros</a></li>
    </ul>
  </nav>
  
  <div class="header-actions">
    <form class="search-form">
      <input type="search" placeholder="Buscar...">
      <button type="submit">Buscar</button>
    </form>
    
    <div class="user-menu">
      <a href="/login">Iniciar sesión</a>
      <a href="/registro">Registrarse</a>
    </div>
  </div>
</header>

Diferencia entre `<header>` y `<head>`

Es importante no confundir <header> con <head>:

<head> contiene metadatos sobre el documento (título, enlaces a CSS, metaetiquetas, etc.) y no se muestra como contenido visible.
<header> es un elemento visible que contiene contenido introductorio o de navegación para el usuario.

<!DOCTYPE html>
<html>
<head>
  <!-- Metadatos, no visibles para el usuario -->
  <title>Título de la página</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <!-- Contenido visible para el usuario -->
    <h1>Título del sitio web</h1>
    <!-- Más contenido del header -->
  </header>
  <!-- Resto del contenido de la página -->
</body>
</html>

Ejemplo de página completa con header

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Sitio Web</title>
</head>
<body>
  <!-- Header principal del sitio -->
  <header id="site-header">
    <div class="logo">
      <img src="logo.png" alt="Logo de Mi Sitio Web">
    </div>
    <nav id="main-navigation">
      <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#servicios">Servicios</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </nav>
    <div class="header-utility">
      <form class="search">
        <input type="search" placeholder="Buscar en el sitio">
        <button type="submit">Buscar</button>
      </form>
      <a href="#cuenta" class="user-account">Mi Cuenta</a>
    </div>
  </header>

  <main>
    <section id="destacados">
      <!-- Header de sección -->
      <header>
        <h2>Artículos Destacados</h2>
        <p>Nuestras publicaciones más recientes y populares</p>
      </header>
      
      <article>
        <!-- Header de artículo -->
        <header>
          <h3>Cómo usar HTML semántico</h3>
          <p>Publicado el <time datetime="2025-03-15">15 de abril de 2025</time></p>
          <p>Por: <a href="#autor">Cristian Escalante</a></p>
        </header>
        <p>Contenido del artículo...</p>
      </article>
      
      <!-- Más artículos... -->
    </section>
    
    <!-- Más secciones... -->
  </main>
  
  <footer>
    <!-- Contenido del footer -->
  </footer>
</body>
</html>

Buenas prácticas

Estructura semántica: Utiliza el elemento <header> para mejorar la legibilidad del código y la accesibilidad del sitio.
Contenido apropiado: Incluye elementos relevantes como logotipos, títulos, navegación principal y elementos relacionados con la introducción.
Accesibilidad: Asegúrate de que la navegación dentro del <header> sea accesible para tecnologías de asistencia.
Elementos anidados: Utiliza los elementos semánticos adecuados dentro del <header>, como <nav> para la navegación y <h1> para el título principal.
Diseño responsivo: El <header> suele ser uno de los primeros elementos a adaptar en diseños móviles, posiblemente transformándose en un menú de hamburguesa.

Modelo de contenido

El elemento <header> puede contener:

Encabezados (<h1> - <h6>)
Elementos de navegación (<nav>)
Logotipos e imágenes
Información de autoría
Elementos de búsqueda
Y cualquier otro contenido introductorio relevante

Elemento select en HTML

El elemento `<select>` crea un control de selección desplega...

Elemento nav en HTML

El elemento `<nav>` representa una sección de una página que...

Referencias

MDN Contributors. (3 de marzo 2025). <header>: The Header element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

W3Schools. HTML <header> Tag. https://www.w3schools.com/tags/tag_header.asp

HTML.com. HTML5 Semantic Elements. https://html.com/semantic-markup/

Elemento header en HTML