Respuesta corta: La cabecera de una web es la franja de arriba de cada página con tu logo y tu navegación. Pon el logo arriba a la izquierda y muestra tus secciones principales. Déjala fija al bajar solo si la gente la necesita mientras se desplaza, y entonces que sea pequeña, opaca y quieta.
Qué es la cabecera de una web
En HTML, un elemento header que no está dentro de un article, una section o main funciona como la cabecera de todo el sitio. Suele llevar un logo, el nombre de la empresa, una búsqueda y, a veces, la navegación principal o un eslogan, y casi siempre va arriba.
Lo que más pesa es el logo. En una prueba de Nielsen Norman Group con 4 sitios, la gente recordó un 89% más los logos arriba a la izquierda que los de la derecha.
Las partes de una cabecera
| Parte | Lo que conviene | Motivo |
|---|---|---|
| Logo | Arriba a la izquierda | El recuerdo de la marca fue del 39% a la izquierda y del 21% a la derecha |
| Navegación | Las secciones principales, más búsqueda y enlaces de utilidad si los tienes | Es a lo que la gente vuelve |
| Alto | Lo mínimo que permitan un texto legible y botones fáciles de tocar | Una cabecera fija ocupa espacio en cada pantalla |
| Fondo | Un color opaco, distinto del contenido | Se lee bien sobre cualquier parte de la página |
| Movimiento | Ninguno, o un encogido rápido | La animación suele molestar y distraer |
De los estudios de Nielsen Norman Group sobre la posición del logo y las cabeceras fijas, en inglés, consultados el 3 de noviembre de 2026.
¿Fija o no?
Una cabecera fija se queda en el mismo lugar mientras la gente se desplaza, así que la navegación, la búsqueda y los enlaces de utilidad siempre quedan a mano. Una parcialmente fija se esconde al bajar y vuelve al subir.
NN/g aconseja preguntarse antes si hace falta: una cabecera fija le quita espacio a cada página. Si se gana ese espacio, que sea pequeña, con un fondo opaco que contraste con el contenido y con el mínimo movimiento.
Siete pasos para una cabecera mejor
- Pon tu logo arriba a la izquierda en todas las páginas.
- En computadora, pon tus secciones principales arriba a la vista; en el teléfono, usa un botón de menú con una palabra.
- Agrega la búsqueda y los enlaces de utilidad que la gente usa a menudo, como iniciar sesión o contacto, si tu sitio los tiene.
- Decide si la cabecera debe quedarse fija: déjala así solo si la gente la usa durante la visita.
- Si es fija, que no sea más alta de lo que exijan un texto legible y botones de al menos 1 por 1 cm.
- Dale un fondo opaco que se distinga del contenido que tiene debajo.
- Limita el movimiento a un encogido rápido como mucho, para que la cabecera nunca salte ni desaparezca.
Nuestra guía del menú hamburguesa explica el menú del teléfono. La guía del call to action explica el botón que llevan muchas cabeceras.
Cómo funciona nuestra cabecera
Miramos nuestra cabecera desde el navegador de un visitante el 3 de noviembre de 2026, en una página de guía en inglés y en español. El logo está arriba a la izquierda: a 65 píxeles del borde con 1,440 de ancho, y a 20 en el teléfono.
Quien entra desde una computadora ve nuestras cuatro secciones, el cambio de idioma, el cambio a modo oscuro y nuestro botón Agenda una llamada. Con 390 píxeles de ancho solo quedan el logo, el cambio a modo oscuro y el botón del menú.
Es fija. Arriba de la página mide 83 píxeles en una pantalla de 1,440 por 900, cerca del 9% del alto. Tras un desplazamiento largo se encoge a 71 píxeles. Su fondo es blanco al 84% de opacidad con desenfoque; NN/g aconseja un fondo del todo opaco.
Antes de dar por terminada tu cabecera
- El logo está arriba a la izquierda.
- Las secciones principales están a un clic en computadora.
- Una cabecera fija se gana el espacio que ocupa en cada página.
- No es más alta de lo que pide un texto legible.
- Su fondo es opaco y se distingue del contenido.
- Nunca salta ni desaparece al desplazarse.
RecuerdaLogo arriba a la izquierda, secciones principales a la vista y una cabecera fija solo si es pequeña, opaca y quieta.
Si quieres una cabecera que ayude a tus visitantes a orientarse, nuestro servicio de diseño web puede hacerla contigo.
Respuestas rápidas sobre la cabecera de una web
¿Qué debe tener la cabecera de una web?
Una cabecera de todo el sitio suele llevar un logo, el nombre de la empresa, una búsqueda y, a menudo, la navegación principal o un eslogan. NN/g suma los enlaces de utilidad, como el inicio de sesión, que la gente necesita desde cualquier página.
¿Dónde va el logo en la cabecera de una web?
Arriba a la izquierda. En la prueba de NN/g con 4 sitios, la gente recordó un 89% más los logos a la izquierda que a la derecha: el recuerdo de la marca fue del 39% a la izquierda y del 21% a la derecha.
¿Mi cabecera debe quedarse fija al bajar?
Solo si la gente la necesita durante la visita. NN/g recuerda que una cabecera fija le quita espacio a cada página. Compara lo que lleva, como la navegación, la búsqueda o el inicio de sesión, con ese espacio.
¿Qué alto debe tener una cabecera fija?
Lo mínimo que permitan un texto legible y unos botones fáciles de tocar. En pantallas táctiles, NN/g pide objetivos de al menos 1 por 1 cm y texto de unos 16 puntos. En el teléfono, cada píxel de cabecera pesa más.
¿Qué es una cabecera parcialmente fija?
Una cabecera que se esconde al bajar y vuelve en cuanto subes un poco. NN/g la ve sobre todo en webs para móviles y dice que funciona razonablemente bien, siempre que no aparezca ni demasiado pronto ni demasiado despacio.
Fuentes
Consultadas el 3 de noviembre de 2026. Nielsen Norman Group, en inglés: Sticky Headers: 5 Ways to Make Them Better (4 de abril de 2021) y Website Logo Placement for Maximum Brand Recall (21 de febrero de 2016). MDN Web Docs: header. Sobre el menú del teléfono, Nielsen Norman Group, en inglés: How to Make Navigation (Even a Hamburger) Discoverable on Mobile. Nuestro caso: nuestra cabecera en una página de guía, en inglés y en español, con el ancho de un teléfono y de una computadora, el 3 de noviembre de 2026.