Llevo más de una década auditando el SEO de cientos de webs, desde e-commerce gigantes hasta el blog de un pequeño negocio en Chamberí. Y si hay un error que veo repetirse hasta la saciedad, uno que parece pequeño pero que revela mucho sobre la base técnica de una web, es el mal uso de la etiqueta header en HTML. Muchos lo confunden, otros lo ignoran y la mayoría simplemente no le saca todo el partido que tiene, especialmente de cara a Google.
La verdad es que entender bien el header no es solo una cosa de programadores «tiquismiquis». Es un pilar de la semántica web, esa disciplina que consiste en darle pistas claras a los motores de búsqueda para que entiendan de qué va tu contenido y por qué es importante. En este artículo te voy a contar, sin rodeos y con ejemplos prácticos, cómo usar esta etiqueta como un auténtico profesional. No solo para que tu código esté más limpio, sino para que tu SEO y tu accesibilidad suban de nivel.
Lo que te llevarás de esta guía:
- La diferencia CLAVE entre
<header>y<head>– Explicada de una vez por todas para que nunca más los confundas (el error del 90% de los principiantes).- Qué elementos meter (y cuáles no) – Mi checklist personal con los componentes que SÍ deben ir en un header y los que son un error garrafal para el SEO.
- El impacto real en tu posicionamiento – Descubrirás cómo esta etiqueta ayuda a Google a entender la estructura de tu web y por qué es vital para la accesibilidad.
- Ejemplos de código listos para usar – Código práctico y comentado para que lo apliques directamente en tu proyecto, ya sea la cabecera principal o la de un artículo.
¿Qué es exactamente la etiqueta header en HTML?
Vamos al grano. La etiqueta <header> en HTML5 sirve para agrupar el contenido introductorio o de navegación de una sección. Ojo, he dicho «de una sección», y esto es clave. Aunque lo más habitual es usarla para la cabecera principal de toda la página, también se puede (y se debe) usar para el encabezado de un artículo, una sección, etc.
Su función es puramente semántica. Es decir, le dice al navegador y a los motores de búsqueda: «¡Oye! Todo lo que hay aquí dentro es la cabecera, el contenido que presenta esta parte de la web».
La analogía que siempre uso: el membrete de una carta
Para que mis clientes lo entiendan fácil, siempre les digo que piensen en el <header> como el membrete de una carta o un documento oficial. ¿Qué pones ahí? Pues lo esencial para que quien lo reciba sepa quién eres y de qué va el tema: el logo de tu empresa, el título del documento, quizás la fecha y tus datos de contacto.
En una web es exactamente lo mismo. El <header> principal de la página contiene los elementos que identifican tu sitio y permiten al usuario navegar: el logo, el menú de navegación, el buscador, el acceso al carrito… Es la «tarjeta de visita» de tu web.
No es solo un `div`, es semántica pura
Antes de HTML5, los desarrolladores usábamos algo como <div id="header"> o <div class="cabecera">. Funcionaba visualmente, claro, pero para un robot como Googlebot, un <div> no significa nada. Es una caja vacía sin valor semántico.
Usar <header> es darle un significado, un contexto. Es decirle a Google: «Esto no es una caja cualquiera, es EL ENCABEZADO». Y créeme, a Google le encanta que le hables claro.
El error que veo una y otra vez: `
` vs. ``
Te lo digo claro: no tienen NADA que ver, y confundirlos es un error de base que puede afectar a cómo se renderiza e indexa tu web. Es el fallo más común que detecto en auditorías técnicas a pymes que se han hecho la web ellos mismos.
<head>(La cabeza – invisible): Es la sección del documento HTML que contiene los metadatos. No es visible para el usuario. Aquí dentro va el<title>, la<meta description>, los enlaces a los archivos CSS y JavaScript… Es el «cerebro» de la página, da órdenes e información al navegador.<header>(La cabecera – visible): Es parte del<body>, es decir, del contenido visible de la página. Es lo que el usuario ve en la parte superior de tu web. Es la «cara» de la página.
Grábatelo a fuego: <head> es para las máquinas, <header> es para los humanos (y para darle pistas a las máquinas sobre lo que ven los humanos).
¿Qué narices pongo dentro de un header?
Vale, ya sabes qué es y en qué se diferencia de <head>. Ahora vamos a lo práctico. ¿Qué elementos suelo recomendar meter en un <header> principal?
Los imprescindibles en tu cabecera
Una buena cabecera de página suele contener una combinación de estos elementos:
- El logotipo de la marca: Normalmente enlazado a la página de inicio.
- El título principal de la página (
<h1>): Sí, el<h1>puede ir dentro del header, sobre todo en la home. Define el propósito principal del sitio. - La navegación principal (
<nav>): El menú con los enlaces a las secciones más importantes de tu web. Meterlo dentro de un<header>ayuda a agrupar semánticamente toda la introducción. - Un buscador: Si tu web tiene mucho contenido, un formulario de búsqueda aquí es un clásico.
- Llamadas a la acción (CTAs): Botones como «Iniciar sesión», «Mi cuenta» o «Contacto».
Un ejemplo de código limpio sería algo así:
<header>
<a href="/">
<img src="/logo.svg" alt="Logo de mi empresa">
</a>
<nav>
<ul>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
<form action="/buscar">
<input type="search" name="q" placeholder="Buscar...">
</form>
</header>Lo que NUNCA deberías meter aquí
El error contrario es meter demasiadas cosas. El header es para contenido introductorio. He visto webs meter aquí párrafos enteros de texto, sliders gigantes con todo el catálogo o incluso el contenido principal de la página. Eso es un desastre semántico y confunde a los crawlers.
El header y su impacto (real) en el SEO
Seamos honestos, usar <header> en lugar de <div> no va a hacer que mañana subas 10 posiciones de golpe. El SEO es mucho más complejo. Pero sí tiene un impacto indirecto en dos áreas que cada vez son más importantes: la estructura y la accesibilidad.
Estructura y rastreo para Google
Piensa en Googlebot como un lector con mucha prisa. Las etiquetas semánticas como <header>, <main>, <footer> o <nav> son como los títulos y subtítulos de un libro. Le ayudan a entender la jerarquía y la función de cada bloque de contenido de un solo vistazo. Una estructura clara facilita un rastreo más eficiente y una mejor comprensión de tu contenido.
Accesibilidad: el SEO que no se ve
Aquí es donde la cosa se pone interesante. Las personas que usan lectores de pantalla (por discapacidad visual, por ejemplo) navegan por la web a través de estas etiquetas. Un lector de pantalla puede anunciar «encabezado principal» o «navegación principal», permitiendo al usuario saltar directamente al contenido que le interesa sin tener que escuchar toda la página.
Una buena accesibilidad (a11y) mejora la experiencia de usuario para TODOS, y Google lo valora cada vez más como señal de calidad. Por defecto, la etiqueta <header> principal de una página tiene un rol ARIA implícito de banner, que es exactamente lo que los lectores de pantalla buscan para identificar la cabecera.
Tabla comparativa: Usos correctos del header
Como te decía, no hay un solo <header>. Su uso depende del contexto. Aquí te dejo una tabla para que lo veas clarísimo.
| Contexto de Uso | Propósito Principal | Elementos Comunes | Mi Consejo Profesional |
|---|---|---|---|
| Encabezado principal (hijo de `<body>`) | Identificar el sitio y la navegación global. | Logo, `<h1>` del sitio, `<nav>` principal, buscador. | Solo debe haber uno por página. Es tu «tarjeta de visita» digital. |
| Encabezado de una sección (`<section>`) | Introducir el contenido de esa sección específica. | `<h2>` o `<h3>` para el título de la sección, un subtítulo. | Perfecto para agrupar el título y la intro de un bloque temático. |
| Encabezado de un artículo (`<article>`) | Presentar metadatos de un contenido autocontenido. | Título del artículo (`<h1>` o `<h2>`), autor, fecha, categorías. | Esencial para la semántica de blogs y noticias. Google lo valora mucho aquí. |
Lo que debes recordar sobre el header
Si has llegado hasta aquí, quédate con estas tres ideas clave. Son las que le repito a mi equipo y a mis clientes constantemente:
- Semántica antes que estilo: Usa
<header>por su significado, no porque se vea de una forma u otra. Su función es estructural, no visual. <header>no es<head>: Uno es visible y para el contenido introductorio; el otro es invisible y para los metadatos. Confundirlos es un error grave.- El contexto es el rey: Puedes usar múltiples
<header>en una misma página, siempre que cada uno sirva para introducir su sección o artículo correspondiente.
Ahora te toca a ti. Abre el inspector de tu navegador (clic derecho > Inspeccionar) y echa un vistazo a tu web. ¿Estás usando bien la etiqueta <header>? Si no es así, ya tienes un punto de mejora claro y accionable para empezar hoy mismo a poner orden en tu código.
Preguntas que siempre me llegan sobre el header
Para terminar, respondo a algunas dudas recurrentes que me encuentro en consultorías y formaciones. Son esas pequeñas preguntas que a muchos les da vergüenza hacer.
¿Puedo tener más de un header en la misma página?
Sí, sin duda. Es totalmente correcto y recomendable. Puedes tener un <header> principal para toda la página y luego otros <header> más pequeños dentro de cada <article> o <section> para introducir su contenido específico.
¿Un header puede contener un H1?
Claro que sí. De hecho, es una práctica muy común y semánticamente correcta, especialmente en la página de inicio, donde el <h1> suele ser el eslogan o el nombre de la marca. También es habitual en un post de blog, donde el <header> del artículo contiene el <h1> del título.
¿Es obligatorio usar la etiqueta header?
Técnicamente, no. Tu web funcionará igual si usas un <div>. Pero si te tomas en serio el SEO y la accesibilidad, es una práctica que considero obligatoria. Estás perdiendo una oportunidad de oro para darle información valiosa a los motores de búsqueda y mejorar la experiencia de usuario.
¿Puedo poner un header dentro de un footer?
Esta es rara, pero me la han preguntado. La respuesta es que no tiene sentido semántico. Son dos elementos con propósitos opuestos: uno introduce el contenido y el otro lo cierra (con información de copyright, enlaces legales, etc.). Sería como poner el membrete de una carta al final de la misma. No lo hagas.
