≡En resumen
- Header significa cabecera: lo que va al principio y presenta el resto del contenido.
- En una web, el header es la zona superior con el logo, el menú y, a menudo, un botón de contacto.
- En HTML existe la etiqueta header, que no es lo mismo que head ni que h1.
- Los headers HTTP y los del email son metadatos técnicos que el usuario normalmente no ve.
- Un buen header es claro, ligero y deja ver el contenido principal sin obligar a hacer scroll.
01 ¿Qué es un header?
El término tiene varios significados según el contexto. Cuando alguien pregunta «qué es un header» casi siempre se refiere a la cabecera de una web, pero en desarrollo también se habla de headers (en plural) para referirse a las cabeceras HTTP, y en informática en general a los metadatos que preceden a un archivo o mensaje. En todos los casos la idea es la misma: información que va delante y describe lo que viene después.
| Contexto | Qué es el header | Ejemplo |
|---|---|---|
| Diseño web | Cabecera visible de la página | Logo, menú y botón de contacto |
| HTML | Etiqueta header que agrupa contenido introductorio | La cabecera del sitio o de un artículo |
| HTTP | Metadatos de peticiones y respuestas | Content-Type: text/html |
| Datos del mensaje antes del cuerpo | From, To, Subject, Date | |
| Documentos | Encabezado que se repite en cada página | Nombre de la empresa en un Word |
| Programación en C y C++ | Archivo de cabecera con declaraciones | stdio.h |
| Fútbol | Remate de cabeza | «A great header» = un gran cabezazo |
02 El header en diseño web: qué debe incluir
El header es lo primero que ve el usuario al llegar y la zona que más se repite en toda la web. Tiene dos funciones: decir dónde estás (marca) y permitir ir a donde quieres (navegación). Todo lo demás es secundario. En un proyecto de diseño web profesional se diseña pronto porque condiciona la arquitectura de toda la página.
- ✓Logo enlazado a la página de inicio.
- ✓Menú principal con 5-7 secciones como máximo y nombres claros.
- ✓Una llamada a la acción destacada: pedir cita, presupuesto o comprar.
- ✓Buscador, si la web tiene mucho contenido o es una tienda online.
- ✓Acceso a carrito y cuenta de usuario en e-commerce.
- ✓Teléfono o WhatsApp si el negocio vive de las llamadas.
- ✓Selector de idioma en webs multilingües.
Header fijo (sticky)
Se queda visible al hacer scroll. Útil en páginas largas y tiendas; conviene que sea compacto para no tapar contenido en el móvil.
Header transparente
Se superpone a una imagen de portada. Queda elegante, pero hay que cuidar el contraste del texto.
Menú hamburguesa
Oculta la navegación tras un icono. Es casi obligatorio en móvil, pero en escritorio esconde opciones importantes.
Header con barra superior
Una franja fina encima con teléfono, envío gratis o idiomas, y debajo la cabecera principal.
03 La etiqueta header en HTML
Desde HTML5 existe un elemento específico, <header>, que representa el contenido introductorio de la página o de una sección: encabezados, logo, buscador, autor o navegación. Forma parte de las etiquetas HTML semánticas, que describen qué es cada bloque y no solo cómo se ve.
Cabecera del sitio:<header><a href="/"><img src="logo.svg" alt="Clínica Ejemplo"></a><nav>…</nav></header>
Cabecera de un artículo:<article><header><h2>Título del post</h2><p>Publicado el 4 de marzo</p></header>…</article>
Según MDN, cuando header no está dentro de article, section, aside, nav o main, los lectores de pantalla lo interpretan como banner, la cabecera de todo el sitio. Dentro de esos elementos es solo la introducción de esa sección. Por eso puedes tener varios header en una página, pero no uno dentro de otro ni dentro de un footer.
| Elemento | Qué es | ¿Se ve en pantalla? |
|---|---|---|
| header | Cabecera visible de la página o de una sección | Sí |
| head | Metadatos del documento: title, meta description, CSS | No |
| h1 | Título principal del contenido | Sí |
| footer | Pie de la página o de una sección | Sí |
04 Headers HTTP y del email: qué son
Cuando buscas «headers qué es» en un contexto técnico, probablemente te refieres a las cabeceras HTTP: líneas con el formato Nombre: valor que el navegador y el servidor intercambian en cada petición y respuesta, antes del contenido. Indican el tipo de archivo, el idioma, las reglas de caché, las cookies o las redirecciones. Su semántica actual está definida en el RFC 9110 del IETF.
Content-Type
Dice qué tipo de contenido se envía, por ejemplo text/html; charset=utf-8.
Cache-Control
Marca cuánto tiempo puede guardar el navegador o una CDN una copia del recurso.
Location
Acompaña a las redirecciones 301 o 302 e indica la nueva URL.
X-Robots-Tag
Permite enviar instrucciones como noindex a los buscadores, útil para PDF y otros archivos.
Revisar estas cabeceras es habitual en SEO técnico: puedes ver cómo se hace en el análisis de cabecera HTTP del servidor. En el correo electrónico ocurre algo parecido: cada email lleva un header con remitente, destinatario, asunto, fecha, identificador del mensaje y los servidores por los que ha pasado. Consultarlo («ver original» o «mostrar cabeceras» en tu gestor de correo) ayuda a detectar suplantaciones y problemas de entrega.
05 Errores frecuentes en el header de una web
- ✓Menús con demasiadas opciones o con nombres internos que el cliente no entiende.
- ✓Un carrusel o vídeo pesado dentro de la cabecera que retrasa la carga.
- ✓Logo en baja resolución o sin texto alternativo.
- ✓El botón principal con el mismo estilo que el resto de enlaces, sin destacar.
- ✓Un header fijo enorme en móvil que tapa el contenido al hacer scroll.
- ✓Submenús que solo se abren al pasar el ratón y no funcionan en pantallas táctiles.
- ✓Enlaces distintos en el header de cada página, que confunden al usuario.
Antes: logo pequeño, once enlaces en el menú («Quiénes somos», «Filosofía», «Noticias», «Servicios fiscales», «Servicios laborales»…) y el teléfono en letra gris en una esquina. En móvil, el menú ocupaba dos líneas.
Después: logo legible, cinco enlaces («Fiscal · Laboral · Contable · Precios · Contacto»), un botón «Pide cita» en color de marca y el teléfono clicable en móvil. Las secciones secundarias pasaron al pie. Es la estructura que se repite en la mayoría de ejemplos de web corporativa que funcionan: pocas opciones, claras y orientadas a la acción.
06 Cómo influye el header en el SEO y la experiencia de usuario
El header no es un factor de posicionamiento por sí mismo, pero afecta a varios que sí importan. Sus enlaces forman parte del enlazado interno de todas las páginas, así que decide qué secciones reciben más autoridad. Y su peso y altura influyen en lo que el usuario ve above the fold, en la velocidad de carga y en la estabilidad visual de la página.
-
1
Enlaza lo importante
El menú debe llevar a tus páginas de servicio o categorías clave, no a secciones secundarias.
-
2
Usa textos de enlace descriptivos
«Diseño web» dice más a usuarios y buscadores que «Servicios 1».
-
3
No pongas el h1 en el logo
El título principal de cada página debe estar en su contenido; el logo se repite en toda la web.
-
4
Aligera imágenes y scripts
Un logo en SVG y un menú sin librerías pesadas cargan antes.
-
5
Reserva su espacio
Fija alturas para que la cabecera no empuje el contenido al cargar.
-
6
Pruébalo en móvil
Un header fijo muy alto puede ocupar un cuarto de la pantalla de un teléfono.
Preguntas frecuentes sobre Header
Significa cabecera o encabezado en inglés. En una web es la parte superior con el logo y el menú; en informática, los datos que van delante de un archivo, petición o mensaje.
Es la franja superior que se repite en todas las páginas, con el logo, el menú de navegación y, a menudo, el buscador o un botón de contacto.
El header es contenido visible, la cabecera de la página o de una sección. El head es la zona invisible del documento con el title, las meta etiquetas y los enlaces a hojas de estilo.
Son líneas con formato nombre: valor que acompañan a cada petición y respuesta web, antes del contenido, e indican datos como el tipo de archivo, la caché, las cookies o las redirecciones.
No hay una medida oficial. Lo recomendable es que sea lo bastante alto para que el logo y el menú se lean bien y lo bastante compacto para que, sobre todo en móvil, el contenido principal se vea sin hacer scroll.
El header es la cabecera, al principio de la página, y orienta la navegación. El footer es el pie, al final, y suele incluir datos legales, contacto y enlaces secundarios.
En inglés futbolístico, header es un remate de cabeza, es decir, un cabezazo.
En Gmail, abre el mensaje, pulsa los tres puntos y elige «Mostrar original». En Outlook está en las propiedades del mensaje. Ahí verás remitente real, servidores y resultados de autenticación.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗