Resume este artículo, encuentra los puntos clave o pregunta lo que quieras entender mejor.
Un header web es un área introductoria de una página o sección que puede contener elementos como el logotipo, la navegación principal, un buscador, accesos a la cuenta del usuario o diferentes acciones importantes.
En muchas webs coincide visualmente con la franja superior de la página, pero desde el punto de vista de HTML el elemento <header> tiene un significado más amplio: representa contenido introductorio o ayudas de navegación asociadas a la página o a una sección determinada.
Por eso un sitio puede tener un header principal y, además, otros elementos <header> dentro de artículos o secciones sin que exista necesariamente un problema.
Qué es un header en una página web
En diseño web solemos llamar header al encabezado principal que aparece al comienzo de una página.
Por ejemplo:
<header>
<a href="/">Mi Marca</a>
<nav>
<a href="/servicios/">Servicios</a>
<a href="/blog/">Blog</a>
<a href="/contacto/">Contacto</a>
</nav>
</header>Este encabezado ayuda al usuario a reconocer dónde está, identificar la marca y desplazarse hacia las áreas principales del sitio.
Sin embargo, <header> no es simplemente una etiqueta para colocar cualquier contenido en la parte superior.
Su uso debería responder a una función introductoria o de navegación.
Header Head y Heading no son lo mismo
Esta es una de las confusiones más frecuentes cuando se empieza a trabajar con HTML.
| Concepto | Qué representa |
|---|---|
<header> |
Contenido introductorio o ayudas de navegación |
<head> |
Metadatos y recursos del documento |
| Heading | Encabezados H1 a H6 que estructuran el contenido |
Por ejemplo:
<head>
<title>Agencia de marketing digital</title>
<meta name="description" content="...">
</head>
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>Agencia de marketing digital</h1>
</main>
</body>El <head> no es visible como una sección normal de la página. Contiene información como el title, metadatos, hojas de estilo o scripts.
El <header> forma parte del contenido de la página.
Y el <h1> es un heading.
Puede haber más de un header en una página
Sí.
HTML permite utilizar un header principal para la página y otros headers asociados a secciones o artículos.
Por ejemplo:
<header>
<nav>Navegación principal</nav>
</header>
<main>
<article>
<header>
<h1>Qué es SEO</h1>
<p>Actualizado el 16 de octubre de 2026</p>
</header>
<p>Contenido del artículo...</p>
</article>
</main>El primer header pertenece al sitio.
El segundo introduce el artículo.
No cumplen exactamente la misma función aunque utilicen la misma etiqueta HTML.
Qué elementos puede incluir un header web
No existe una lista obligatoria.
Un encabezado puede incluir algunos de estos elementos según el tipo de sitio:
- Logotipo.
- Nombre de la marca.
- Navegación principal.
- Buscador.
- Selector de idioma.
- Acceso a cuenta.
- Carrito de compra.
- Botón de contacto.
- Llamada a la acción.
La decisión debería depender de lo que el usuario necesita hacer con mayor frecuencia.
Añadir todos estos componentes porque “un header profesional debe tenerlos” puede producir exactamente el problema contrario: demasiadas opciones compitiendo por atención.
Header y navegación principal
Una de las funciones más habituales del header es alojar la navegación global.
Para ello puede utilizarse el elemento:
<nav></nav>Por ejemplo:
<header>
<a href="/">MargetC</a>
<nav aria-label="Navegación principal">
<a href="/servicios/">Servicios</a>
<a href="/casos/">Casos de éxito</a>
<a href="/blog/">Blog</a>
<a href="/contacto/">Contacto</a>
</nav>
</header>El objetivo es que las principales áreas del sitio sean comprensibles y fáciles de alcanzar.
Un menú no mejora porque tenga veinte opciones.
Cuando existen demasiadas categorías puede ser necesario agruparlas o crear niveles secundarios.
Qué relación tiene el header con SEO
La etiqueta <header> por sí sola no hace que una página posicione mejor.
Su relación con SEO es principalmente estructural.
Un header puede contener enlaces internos importantes hacia:
- Categorías.
- Servicios.
- Productos.
- Secciones principales.
Cuando esos enlaces se implementan correctamente pueden ayudar tanto al usuario como a los motores de búsqueda a descubrir y comprender la arquitectura del sitio.
Por ejemplo:
<a href="/servicios/seo/">SEO</a>es preferible a implementar una navegación importante exclusivamente mediante elementos que no funcionan como enlaces HTML rastreables.
El menú del header debe incluir todas las páginas
No.
El header no debería convertirse en un sitemap completo.
Su función es facilitar acceso a las áreas relevantes, no mostrar cada URL existente.
Por ejemplo, una web puede tener 500 artículos sin necesitar 500 enlaces dentro de la navegación principal.
Esas páginas pueden descubrirse mediante:
- Categorías.
- Enlaces contextuales.
- Paginaciones.
- Páginas de archivo.
- Enlazado interno relacionado.
El menú principal debería mantenerse comprensible.
Cómo diseñar un header para móviles
El diseño móvil dispone de mucho menos espacio horizontal.
Por eso normalmente es necesario priorizar.
Un header móvil podría contener:
- Logotipo.
- Menú.
- Buscador cuando sea importante.
- Carrito en ecommerce.
- Una acción principal.
El conocido menú de hamburguesa puede utilizarse para ocultar opciones secundarias, pero no debería dificultar acciones que el usuario necesita constantemente.
En ecommerce, por ejemplo, ocultar carrito y búsqueda en varios niveles puede añadir fricción.
Qué es un sticky header
Un sticky header permanece visible total o parcialmente mientras el usuario se desplaza por la página.
Puede resultar útil en sitios donde las personas necesitan acceder con frecuencia a:
- Navegación.
- Buscador.
- Carrito.
- Acciones principales.
Pero sticky no significa automáticamente mejor experiencia.
En pantallas pequeñas, un encabezado demasiado alto puede ocupar una parte importante del espacio disponible.
También debe comprobarse que no tape contenido ni controles cuando el usuario navega mediante teclado o accede a enlaces internos.
Header sticky o header estático
| Header estático | Header sticky |
|---|---|
| Deja de verse al desplazarse | Permanece visible |
| Libera espacio en pantalla | Mantiene acciones accesibles |
| Implementación sencilla | Requiere más cuidado con responsive y accesibilidad |
| Puede ser suficiente para páginas cortas | Puede ayudar en interfaces extensas |
No existe una elección universalmente mejor.
Debe probarse según contenido, dispositivo y comportamiento esperado.
Header y accesibilidad
El header también debe poder utilizarse sin ratón.
Entre los aspectos que conviene revisar están:
- Orden lógico del foco.
- Indicadores de foco visibles.
- Menús utilizables con teclado.
- Contraste suficiente.
- Botones correctamente identificados.
- Etiquetas comprensibles.
- Submenús que puedan abrirse y cerrarse correctamente.
Esto adquiere especial importancia en headers sticky.
Si el encabezado permanece fijo y cubre completamente un enlace o control que acaba de recibir el foco mediante teclado, puede generar un problema serio de accesibilidad.
Header y experiencia de usuario
Un buen header debería responder rápidamente a preguntas como:
- ¿Qué sitio estoy visitando?
- ¿Dónde están las principales secciones?
- ¿Cómo vuelvo al inicio?
- ¿Cómo encuentro algo?
- ¿Dónde inicio sesión?
- ¿Dónde está mi carrito?
- ¿Cómo contacto con la empresa?
No todas estas preguntas son relevantes para cada sitio.
Por eso el diseño debe partir de tareas reales y no de una plantilla genérica.
Header para una landing page
Una landing orientada a una campaña puede necesitar un header considerablemente más sencillo que un sitio corporativo.
Por ejemplo:
Logo Solicitar valoraciónEn determinados casos incluso puede resultar conveniente reducir la navegación secundaria para mantener el foco en la oferta.
Eso no significa que eliminar el menú siempre aumente conversiones.
La decisión depende del tráfico, oferta, confianza necesaria y objetivo de la página.
Header para ecommerce
En una tienda online suelen cobrar especial importancia:
- Logo.
- Categorías.
- Buscador.
- Cuenta.
- Wish List cuando existe.
- Carrito.
En catálogos amplios, el buscador puede convertirse en uno de los componentes centrales.
También conviene mostrar estados relevantes.
Por ejemplo:
Carrito (3)comunica más información que un icono sin contexto.
Header para blog
Un blog normalmente necesita una navegación más orientada al descubrimiento de contenido.
Puede incluir:
- Inicio.
- Categorías.
- Buscador.
- Temas principales.
- Acceso al sitio principal.
Esto no significa que todas las categorías tengan que estar dentro del header.
Las más específicas pueden resolverse mediante arquitectura interna y navegación contextual.
El header necesita un H1
No necesariamente.
El elemento <header> suele contener contenido introductorio y puede incluir un heading, pero HTML no exige que cada header tenga un H1.
Por ejemplo:
<header>
<a href="/">Marca</a>
<nav>...</nav>
</header>puede ser completamente válido.
El H1 principal podría aparecer después dentro de <main>.
Header y llamadas a la acción
Una CTA dentro del header puede tener sentido cuando representa una acción importante y frecuente.
Por ejemplo:
- Solicitar demo.
- Reservar cita.
- Comprar.
- Contactar.
Pero no toda web necesita un gran botón comercial permanentemente visible.
Antes de añadirlo conviene preguntarse:
¿Esta es realmente la siguiente acción que necesita la mayoría de usuarios que llegan aquí?
La respuesta debería basarse en la función de la página y, cuando sea posible, en datos de comportamiento y pruebas.
Un header mejora las conversiones
No por sí mismo.
Un header claro puede reducir fricciones y facilitar que los usuarios encuentren una acción.
Pero la conversión también depende de:
- Oferta.
- Precio.
- Confianza.
- Contenido.
- Intención del visitante.
- Formulario.
- Proceso de compra.
Por eso no deberíamos afirmar que hacer el CTA más grande, modificar el color o convertir el header en sticky aumentará necesariamente las conversiones.
Cuando una decisión de interfaz es importante, puede validarse mediante investigación de usuarios o experimentación.
Errores frecuentes al diseñar un header
- Confundir
<header>con<head>. - Confundir header con heading.
- Incluir demasiadas opciones.
- Ocultar acciones esenciales en móvil.
- Utilizar enlaces que no funcionan correctamente como enlaces.
- Crear menús desplegables difíciles de usar con teclado.
- Hacer un header sticky demasiado alto.
- Tapar contenido al navegar hacia anchors.
- Utilizar iconos sin significado claro.
- Repetir llamadas a la acción innecesariamente.
Cómo evaluar si un header está bien diseñado
Puedes realizar una revisión sencilla.
- Comprueba el header en móvil y escritorio.
- Navega utilizando únicamente teclado.
- Revisa si todos los enlaces funcionan.
- Comprueba si las principales secciones pueden encontrarse fácilmente.
- Valida qué ocurre al aumentar el zoom.
- Prueba el menú abierto y cerrado.
- Comprueba el sticky mientras haces scroll.
- Revisa los estados de foco.
- Evalúa si sobran elementos.
También puedes pedir a una persona que nunca haya utilizado la web que encuentre tres acciones importantes.
Si necesita preguntar dónde están, probablemente exista margen de mejora.
Qué relación tiene el header con GEO
El header no es una optimización específica para aparecer en respuestas generadas por inteligencia artificial.
Su contribución es principalmente estructural.
Una navegación coherente puede ayudar a construir relaciones claras entre áreas importantes del sitio:
Home
↓
Servicios
↓
Servicio específico
Home
↓
Blog
↓
Categoría
↓
ArtículoEsa arquitectura también ayuda a mantener organizadas entidades, contenidos y páginas importantes.
Pero añadir enlaces o palabras clave al header no garantiza presencia en ChatGPT, Copilot, AI Overviews u otros sistemas generativos.
Qué debe tener un buen header
No existe una plantilla perfecta para todos los sitios.
Un buen header debería tener únicamente los elementos necesarios para que el usuario pueda comprender la identidad del sitio y realizar sus principales tareas.
En algunos casos será:
Logo + navegaciónEn otros:
Logo + categorías + búsqueda + cuenta + carritoY en una landing podría reducirse a:
Logo + CTALa calidad de un header no depende de cuántos elementos incluya, sino de si ayuda a las personas a orientarse, navegar y ejecutar las acciones que realmente necesitan sin añadir fricción innecesaria.
Explora nuestros servicios o cuéntanos qué necesitas mejorar.
Convierte lo que aprendes en el siguiente paso de tu negocio
Preguntas frecuentes sobre Header
Qué es un header en una página web
Un header es un área introductoria que puede contener identidad de marca, navegación, búsqueda y otras ayudas para orientar al usuario dentro de una página o sección.
Header y head son lo mismo
No. Header forma parte del contenido visible de la página, mientras head contiene metadatos y recursos del documento como title, meta etiquetas, estilos o scripts.
Header y heading son lo mismo
No. Header es un elemento que agrupa contenido introductorio o navegación. Heading hace referencia a encabezados H1, H2, H3 y demás niveles utilizados para estructurar contenido.
Puede haber más de un header en una página
Sí. Puede existir un header general del sitio y otros dentro de artículos o secciones cuando cumplen una función introductoria para esos contenidos.
Qué debe incluir un header web
Depende del sitio. Puede incluir logo, navegación, buscador, cuenta, carrito o una llamada a la acción, pero no es necesario incorporar todos esos elementos.
Un header necesita un H1
No. Un header puede contener un heading, pero no es obligatorio que cada elemento header incluya un H1.
Qué es un sticky header
Es un encabezado que permanece visible mientras el usuario se desplaza por la página. Debe implementarse evitando ocupar demasiado espacio o tapar contenido y controles.
El header ayuda al SEO
Puede contribuir a una arquitectura y navegación claras, especialmente mediante enlaces internos correctamente implementados, pero la etiqueta header por sí sola no mejora el posicionamiento.
Qué es un header responsive
Es un encabezado cuya distribución y funcionamiento se adaptan a diferentes tamaños de pantalla y métodos de interacción.
Qué debe tener un header de ecommerce
Dependiendo de la tienda puede incluir logo, categorías, búsqueda, cuenta, lista de deseos y carrito, priorizando siempre las funciones que los compradores necesitan con mayor frecuencia.
Un header sticky aumenta las conversiones
No necesariamente. Puede facilitar determinadas acciones, pero su efecto sobre conversión debe evaluarse según el sitio y el comportamiento real de los usuarios.
Cuál es el principal objetivo de un header
Ayudar al usuario a reconocer el sitio, comprender sus opciones principales y desplazarse hacia las áreas o acciones más relevantes con el menor esfuerzo posible.
