Header

Qué es el Header de una Web

---

El header o cabecera es una parte fundamental de la web que se encuentra en la parte superior de la misma y que, como ocurre con el footer se repite en todas las páginas que la componen dotándola de continuidad y coherencia.

Qué podemos encontrar en la cabecera de una web

En el header de una web podemos encontrar habitualmente varios elementos muy importantes:

• El menú de navegación principal con los enlaces a las secciones de la web.
• La marca, logotipo o nombre de la web.
• Una pequeña descripción (en ocasiones)
• El buscador de la página (en ocasiones)

Como vemos, el header presenta la información básica para identificar a la empresa o persona detrás de la misma y nos invita a descubrir el contenido de esa página web.

Pero por supuesto, éstos elementos pueden ser bien distintos dependiendo del tipo de web. Así que vamos a ver algunos ejemplos.

Diferentes tipos de header según el tipo de web

A diferentes tipos de web tendremos diferentes opciones para las cabeceras:

Cabecera de un blog

Normalmente en la cabecera de un blog solemos encontrarnos con secciones tales como:

• Las categorías.
• La página de acerca de o sobre mí.
• La página de contacto.
• El buscador para encontrar artículos.

Si el blog es de marca personal, además podremos encontrar:

• La sección de servicios.
• E incluso una pequeña sección de portfolio.

Si se tratase de un blog magazine podríamos ver:

• Una zona para banners publicitarios.
• Y un enlace al archivo de autores.

Por otro lado, en el caso de los blogs, los logos suelen ser más tipográficos ya que no es tan habitual que haya una marca comercial tras ellos.

Header de una web corporativa

En las webs corporativas el header suele ser más complejo.

Normalmente veremos un header con el logotipo bien destacado ya que se busca que el contenido de la página web se relacione con la marca y ésta imagen quede fijada en nuestras cabezas.

En cuanto secciones podríamos ver enlaces a:

• La página de inicio (la portada de la web)
• El sobre nosotros.
• Página de servicios.
• El portfolio.
• La tienda (en algunas ocasiones)
• El Blog.
• La página de contacto.

Además, las webs corporativas suele tener una zona que va encima llamada header top donde se colocaría información o llamadas a la acción tales como:

• El teléfono de la empresa y los horarios de atención al cliente (mucho mejor si el teléfono es clicable)
• El correo electrónico de contacto (mucho mejor si al hacer clic en el mismo se abre el gestor de correos)
• Las redes sociales.
• El acceso a la intranet (si la empresa tuviera una zona para usuarios registrados o trabajadores)

Cabecera de una tienda online

En las tiendas online, lo más importante del header, además del branding o logo, serían las siguientes secciones:

• Inicio.
• Categorías de productos.
• Sobre nosotros.
• Mi cuenta.
• Contacto.

Además, podemos encontrar hasta dos (header top) con banners con ofertas de todo tipo y la información de atención al cliente para reforzar la confianza de los usuarios.

La verdad es que las tiendas online tienen las cabeceras más complejas e interesantes de todas las webs. Pero de esto hablaremos en otro artículo.

Cómo se escribe el header en html

Seré muy breve con esto porque es más interesante el siguiente punto y no quiero que te pierdas.

Antiguamente el header se identificaba en el código de nuestra web mediante un div con el id o class header. Algo así:

<div id="header">aquí el contenido del header</div>

Pero desde que apareció el mejorado html5, la cabecera dispone de su propia etiqueta semántica:

<header>Aquí el contenido de la cabecera</header>

A tener en cuenta a la hora de diseñar un header

Cuando vayas a crear tu header ten en cuenta los siguientes puntos:

Que no sea demasiado alto

Antes de hacer scroll (above the scroll en inglés) suele estar la información más importante de la web. Cosas como la propuesta de valor o la llamada a la acción principal de esa página.

Pues bien, si te pasas de altura en la cabecera quedará menos espacio para estos elementos tan importantes.

El motivo de pasarse de altura, normalmente es el Branding. Quiero decir el logo y la descripción que pudiera haber ahí.

Trata de ser equilibrado y no te pases de altura sin quitarle protagonismo a ese logo.

Dejar fijo el header cuando se hace Scroll

Si quieres que la cabecera de la web se quede fija y nos acompañe cuando estemos navegando verticalmente haz uso de un header fixed o sticky header.

De esta forma tanto Branding como menú de navegación estará presente durante todo el scroll :)

El header en los dispositivos móviles

Recuerda que en los dispositivos móviles el header debe ser menos alto todavía. Así que te tocará crear una alternativa a tu logo para escritorio, colocar los elementos del menú de navegación en un menú de hamburguesa y adecuar u ocultar la cajetilla de búsqueda.

Creo que con esto hemos terminado. Por supuesto podríamos seguir hablando del tema largo y tendido. Pero para que te hagas una idea de qué es el header y la importancia que tiene hay suficiente :)

¿Quieres participar en el diccionario colaborativo? Envíame un término por aquí y te escribo con los detalles. ¡Muchas gracias!