Footer

Qué es el Footer de una web

---

Solemos referirnos al Footer cuando hablamos del pié de página de una web, es decir, la última sección que nos encontramos, comúnmente diferenciada del resto de la web por otros colores o por una división horizontal.

Pero Footer a su vez es un elemento HTML, que se define por la etiqueta de apertura de <footer> y etiqueta de cierre </footer>. Y si bien el pié de página de una web está definido por dichas etiquetas, el elemento footer en HTML también nos permite definir información dentro de otros elementos, como un <article>, <aside> o <section> por ejemplo.

Es decir, dentro de una misma página web nos podemos encontrar con varios elementos footer, pero cada uno hace referencia a una unidad de contenido diferente.

Esta semántica entre las etiquetas HTML y el área inferior de la página no llegó hasta HTML5, que fue cuando se introdujo footer como nuevo elemento. Anteriormente se solía definir dicho área con un div al que se le daba un identificador footer: <div id=”footer”></div>, pero no había ninguna recomendación ni regla a seguir.

Para qué se usa el footer

El uso de dicho elemento está ligado a la inclusión de información relacionada con el contenido al que acompañan, tales como:

• Identificación del Autor
• Enlaces de interés
• Información sobre copyright
• Avisos sobre Políticas de Privacidad, cookies y devoluciones (en caso de tienda online)
• Contacto
• Mapa del sitio

A nivel de experiencia de usuario, al igual que tenemos la premisa de que el menú de navegación se ubica en la parte inferior, tenemos la predisposición de encontrar el footer en la parte inferior de la web, aunque dicho orden pueda cambiar gracias a CSS sin alterar la estructura de la web.

Solemos por tanto recurrir al pié de página para recopilar información acerca de la web, independientemente si la página donde hemos aterrizado en la home, contacto o un artículo del blog, pues al igual que sucedía con el orden, entendemos que el mimo footer se repite en todas las páginas.

Diferentes tipos de footer o distinta disposición del footer

Hay también algunos casos excepcionales donde el footer cambia radicalmente o incluso no se muestra de la forma en la que estamos acostumbrados. Por un lado el elemento footer necesita de un diseño distinto en páginas donde se usa el infinite scroll o scroll infinito, por ejemplo en la página principal de un blog.

En este caso, para evitar tener que obligar al usuario a hacer scroll durante mucho tiempo hasta llegar a cargar todos los artículos y mostrar el final de la página, se opta por añadir un footer flotante (con CSS position absolute o fixed) donde se recoge la información mínima necesaria.

El otro caso singular aparece cuando estamos en una web que usa el alto del viewport como altura máxima. Es más común en apps para móviles pero también en versiones para escritorio o webs de SaaS. En estos casos, toda la información que se mostraría en el footer se oculta tras un botón. Tendríamos un footer oculto a la espera de una acción por parte del usuario.

Finalmente, a nivel de diseño web, el footer suele ser unos de las secciones que desafortunadamente menos importancia y tiempo de trabajo acaparan, pese a estar presente normalmente en todas las páginas de nuestra web. No es raro encontrarnos con enlaces rotos y fechas de copyright desactualizadas.

¿Quieres colaborar añadiendo un término al diccionario? Envíamelo aquí y te escribo con los detalles. ¡Muchas gracias!