Definición:
Un header, o cabecera, es una zona de una página web que presenta información de identificación y orientación, como el nombre del sitio, su logotipo o el acceso a las secciones principales. La cabecera general suele aparecer en la parte superior y repetirse en varias páginas para mantener una navegación coherente.
No es sinónimo de menú ni de barra de navegación: puede contener esos elementos junto con un buscador, opciones de cuenta u otros controles. Su composición depende del propósito del sitio; no existe un conjunto obligatorio de componentes ni toda página necesita una cabecera visual independiente.
Índice de contenidos
El header en HTML
En HTML, el elemento <header> representa contenido introductorio o ayudas de navegación de la página o de una sección. No determina por sí solo su posición, tamaño o aspecto: esa presentación se controla mediante estilos CSS.
La referencia del elemento header distingue una cabecera general de la cabecera de un artículo o sección. Por eso, una misma página puede contener varios elementos <header> con funciones diferentes; no todos representan la cabecera principal del sitio.
Un ejemplo mínimo de marcado es el siguiente:
<header>
<a href="/">Nombre del sitio</a>
</header>
Este elemento no debe confundirse con <head>, que contiene metadatos y referencias a recursos del documento. Tampoco equivale a un encabezado <h1> ni al elemento <nav>, que identifica un bloque de navegación. Un header puede contener títulos y navegación, pero cada elemento tiene su propia función semántica.
Una cabecera puede permanecer visible durante el desplazamiento mediante CSS. Esa característica, conocida como cabecera fija o sticky según la técnica utilizada, no es inherente a <header> y debe comprobarse para evitar que tape contenido o controles, especialmente en pantallas pequeñas.
Elementos del header
La selección depende de las necesidades del usuario y del tipo de sitio. Estos nueve componentes son opciones habituales, no una lista que deba incorporarse completa en todas las cabeceras:
Logotipo
Identifica la marca y suele enlazar a la página de inicio. Es frecuente situarlo a la izquierda, aunque no es una posición obligatoria. Cuando funciona como enlace, su texto o alternativa de imagen debe permitir comprender a qué sitio o destino conduce.
Barra de búsqueda
Facilita encontrar contenidos o productos sin recorrer los menús, especialmente en sitios con catálogos o información extensa. No es necesaria en todas las webs. El campo y su botón deben tener etiquetas comprensibles y poder utilizarse con teclado; añadir un icono de lupa no garantiza por sí solo accesibilidad.
Selección de idioma
Permite cambiar entre las versiones lingüísticas disponibles. Los nombres de los idiomas identifican la opción con mayor precisión que una bandera aislada: un país puede tener varias lenguas y una lengua utilizarse en distintos países. Cuando existe una página equivalente, el selector debe conducir a esa versión y no únicamente a la portada.
Contacto
Puede mostrar teléfono, correo, ubicación o un enlace a la página de contacto cuando sean relevantes para la consulta. Esta información también puede situarse en el pie de página; no es necesario repetir todos los datos en la cabecera si dificultan la navegación.
Enlaces del sitio web
El menú reúne accesos a las secciones principales. Su organización debe reflejar la estructura del sitio y utilizar etiquetas descriptivas. En móvil puede agruparse en un menú desplegable, con un control identificable que permita abrirlo, cerrarlo y recorrer sus opciones con teclado.
Redes sociales
Los enlaces a perfiles como Instagram, Facebook, LinkedIn o X pueden facilitar el acceso a otros canales del negocio. No siempre necesitan una posición destacada en la cabecera: deben valorarse frente a las acciones principales de la web y llevar a perfiles vigentes y reconocibles.
Banner
Un banner puede presentar una promoción, un aviso o publicidad. No es un componente obligatorio del header. Su tamaño y carga no deberían ocultar la navegación ni desplazar inesperadamente los controles; el contenido publicitario debe distinguirse del resto.
Registro e inicio de sesión
Permiten acceder a una cuenta o crearla cuando el servicio ofrece funciones para usuarios registrados. Una vez iniciada la sesión, esos controles pueden sustituirse por accesos al perfil o al área privada. Las etiquetas deben distinguir acciones diferentes, como registrarse, iniciar sesión y cerrar sesión.
App móvil
Si existe una aplicación para Android o iOS, la cabecera puede enlazar a su ficha en la tienda correspondiente. El destino debe coincidir con la aplicación y el sistema indicados. El acceso a la descarga no debería impedir continuar utilizando la versión web.