0 Comentarios
Crear un footer en HTML no es difícil, pero hacerlo bien... eso ya es otra historia. Si estás dando tus primeros pasos en el diseño web, probablemente te has encontrado con esa sección al final de la página que muchas veces ignoramos: el pie de página. Pero resulta que el footer tiene un papel clave tanto para el usuario como para el SEO. En esta guía te contamos cómo hacerlo desde cero, sin prisa pero sin pausa.
El footer, también conocido como pie de página, es esa sección final de una web donde se suelen incluir datos de contacto, enlaces legales, redes sociales o cualquier otro tipo de información complementaria. Aunque muchas veces pasa desapercibido, el footer es clave para la navegación, la credibilidad de la web y la experiencia del usuario.
Además, a Google le encanta que tu web esté bien estructurada. Un footer limpio, organizado y accesible puede mejorar la indexación y contribuir al SEO general del sitio.
No hay una receta universal, pero sí hay algunos ingredientes que no deberían faltar en tu footer:
Correo electrónico, teléfono, dirección física (si aplica)... y algunos enlaces rápidos como "Sobre nosotros", "Ayuda" o "Blog". Piensa en lo que alguien buscaría justo antes de abandonar tu web.
No pongas veinte redes, solo las que realmente uses. Y mejor que los enlaces se abran en una nueva pestaña. Incluye solo iconos reconocibles y con suficiente contraste para ser accesibles.
Términos y condiciones, política de privacidad, aviso legal, cookies... Lo típico, pero necesario. Si estás en Europa, además, esto es obligatorio por ley.
Una frase tan sencilla como "© 2025 MiWeb. Todos los derechos reservados." da un toque más profesional. Si has usado recursos de terceros (como fotos o plantillas), también puedes mencionarlos aquí.
Vamos al código. Un ejemplo muy básico de un footer en HTML sería algo como esto:
<footer>
<div class="footer-contenido">
<p>Contáctanos: contacto@miweb.com</p>
<ul>
<li><a href="/sobre-nosotros">Sobre nosotros</a></li>
<li><a href="/aviso-legal">Aviso legal</a></li>
</ul>
<p>© 2025 MiWeb</p>
</div>
</footer>
Este esqueleto se puede extender todo lo que quieras, pero la idea es clara: una etiqueta <footer>, dentro una estructura con bloques <div>, listas <ul>, enlaces <a> y texto <p>.
El HTML estructura, pero el CSS embellece. Puedes aplicar estilos así:
footer {
background-color: #222;
color: white;
padding: 20px;
text-align: center;
}
Utiliza clases y evita estilos inline, eso te facilitará la vida cuando tu web crezca.
Fijo: usa position: fixed; bottom: 0; pero con cuidado, que no tape contenido.
Responsive: media queries al rescate. Asegúrate de que el texto no se solape en pantallas pequeñas.
Accesible: textos con contraste, enlaces claros y buena jerarquía visual.
En HTML5, la etiqueta <footer> se volvió semántica. Antes usábamos <div id="footer">, pero ahora Google y los navegadores entienden mejor el contenido si usamos etiquetas como <footer>, <nav>, <section>...
Ventaja principal: mejora la estructura semántica y ayuda al SEO.
Webs como Stripe, GitHub o Medium tienen footers limpios, informativos y sin saturación visual.
Echa un vistazo a tu competencia directa. Hay mucho que aprender simplemente observando.
Saturarlo de enlaces irrelevantes
No hacerlo responsive
Falta de contraste en los textos
Enlaces rotos o mal etiquetados
Evita que tu footer se convierta en un cajón desastre. Menos es más.
CodePen.io para probar ejemplos en vivo.
Font Awesome para iconos sociales.
para paletas de colores.
Plantillas HTML gratuitas en HTML5 UP.
Tu footer no debería ser una ocurrencia de última hora. Es una herramienta valiosa para guiar al usuario, reforzar la identidad de tu marca y aportar estructura al sitio web.
Y si necesitas ayuda profesional para diseñar una web bien estructurada, accesible y moderna, puedes echar un vistazo a nuestro servicio de diseño web en Alicante. Estaremos encantados de ayudarte a construir una web que funcione y convenza.
¿Qué te ha parecido este artículo?