Etiqueta footer en HTML: pie de página y de artículo
La etiqueta <footer> representa información de cierre de una sección o de la página, como autoría, enlaces relacionados y datos legales. Úsala para separar esos datos del contenido que acompañan: por ejemplo, el nombre de quien escribe una noticia o el aviso de derechos del sitio. Un pie de artículo y un pie global pueden convivir en la misma página.
Ejemplo mínimo de footer
<footer>
<p>© 2026 Aula Web</p>
<a href="mailto:contacto@example.com">Contacto</a>
</footer>Se ve el aviso de derechos y un enlace de contacto. El elemento identifica el conjunto como información de pie; no dibuja una franja ni lo fija al borde inferior de la pantalla. mailto: solicita abrir una aplicación de correo si está configurada, sin enviar nada automáticamente. La dirección es ficticia: sustitúyela por una real antes de publicar.
Para probarlo, coloca el fragmento dentro del <body> de un documento HTML con <!doctype html>, idioma español, codificación UTF-8 y un <title>. Guárdalo como footer-minimo.html y ábrelo en el navegador.
Sintaxis y contexto válido
La apertura <footer> y el cierre </footer> son obligatorios. Puedes colocarlo donde se admita contenido de flujo y añadir párrafos, listas, enlaces u otras agrupaciones válidas. Hay restricciones incluso cuando el resultado parece correcto:
- Un
<footer>no puede tener descendientes<header>ni<footer>, tampoco dentro de un<div>intermedio. - No puede estar dentro de
<header>, otro<footer>o<address>, por las restricciones de esos contenedores. - No debe introducirse dentro de un
<p>, que admite contenido de frase, ni contener el<main>de la página.
El pie no crea una sección nueva. Estas reglas y el alcance del elemento se definen en el HTML Living Standard; el resumen técnico de MDN permite revisar sus contextos.
A qué contenido corresponde cada pie
El <footer> pertenece a su antepasado más cercano que delimita una sección: <article>, <section>, <aside> o <nav>. Si no hay ninguno, corresponde al <body> y, por tanto, a la página completa. Un <div> intermedio no cambia ese alcance.
En una noticia, la autora del artículo es responsable de esa pieza; los datos de la editorial corresponden al sitio. Por eso conviene colocar la firma dentro del <article> y los datos globales fuera de él. Puede haber varios pies para distintos artículos o secciones. Tampoco existe una obligación de ponerlos siempre al final de su ámbito, aunque suele facilitar la lectura.
Qué información incluir
Un pie puede reunir la firma, la fecha de publicación o actualización, documentos relacionados, contacto y avisos legales. Dos o tres enlaces secundarios no necesitan necesariamente un <nav> adicional.
Usa <address> para el contacto de la persona u organización responsable del artículo más cercano o de la página. La fecha debe ir fuera de ese elemento. Una dirección postal mencionada como lugar de una noticia tampoco se convierte en contacto: puede seguir en un párrafo.
<small> permite marcar notas legales y comentarios secundarios dentro del pie; no sustituye al contenedor. <header> reúne información introductoria. Si solo necesitas una caja para aplicar estilos, <div> sirve como agrupación genérica.
Caso práctico: noticia, firma y pie legal
Guarda este documento completo en noticia.html y ábrelo directamente. Todo el CSS está incluido; no necesita JavaScript, servidor, imágenes ni otros archivos. Los nombres y correos son datos de demostración.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Noticias de Aula Web</title>
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
body > header, main, .pie-sitio { padding: 1rem; }
article { max-width: 65ch; margin-inline: auto; }
.pie-noticia { border-top: 1px solid #767676; }
.pie-sitio { background: #e8eef4; }
address { font-style: normal; }
a { color: #164f87; }
a:focus-visible { outline: 3px solid #164f87; outline-offset: 3px; }
</style>
</head>
<body>
<header>
<h1>Noticias de Aula Web</h1>
</header>
<main>
<article>
<h2>La biblioteca estrena un taller de lectura</h2>
<p>Las sesiones gratuitas se celebrarán los sábados por la mañana.</p>
<footer class="pie-noticia">
<p>Escrito por Lucía Ruiz. Publicado el
<time datetime="2026-10-03">3 de octubre de 2026</time>.</p>
<address>
Contacto de la autora: lucia@example.com
</address>
</footer>
</article>
</main>
<footer class="pie-sitio">
<p><a href="#contacto-editorial">Contacto editorial</a> ·
<a href="#aviso-legal">Aviso legal</a></p>
<address id="contacto-editorial">
Editorial Aula Web: contacto@example.com
</address>
<p id="aviso-legal"><small>© 2026 Aula Web.
Contenido ficticio preparado para este ejemplo.</small></p>
</footer>
</body>
</html>La firma aparece después de la noticia y se refiere solo a ella. El segundo pie contiene contacto editorial y una nota legal para toda la página. Con Tab puedes recorrer sus dos enlaces; al activarlos, saltas a destinos que existen en el documento.
La cuadrícula distribuye tres filas para cabecera, contenido y pie global. min-height: 100vh y la fila central 1fr permiten que el pie llegue al borde inferior cuando hay poco contenido. Al añadir varios párrafos a la noticia, la página crece y el pie queda después del contenido, sin cubrirlo. Es una variante del diseño de pies con CSS Grid explicado por MDN.
Prueba dos cambios: retira display: grid y grid-template-rows para observar el flujo normal; después cambia el pie global por <div class="pie-sitio">, incluido el cierre. Conserva su apariencia gracias a la clase, pero pierde el significado y la región accesible de pie. Si retiras completamente ese bloque, desaparecen también los datos legales y sus enlaces.
Atributos y accesibilidad
<footer> no tiene atributos específicos. Admite globales como id, class, lang y hidden. class permite seleccionar el pie; display, position y min-height son propiedades CSS. Las propiedades DOM y los eventos de JavaScript tampoco son atributos particulares de esta etiqueta.
El pie global del ejemplo se expone como región contentinfo. El pie de la noticia no tiene esa función. Según ARIA en HTML, el rol implícito cambia cuando el pie es descendiente de <article>, <aside>, <main>, <nav> o <section>, o de elementos con sus roles equivalentes. El significado de HTML y el mapeo accesible son aspectos distintos: <main> no delimita por sí mismo una sección para calcular el alcance del pie.
Evita añadir role="contentinfo" a todos los pies: no convierte una firma local en información global. En el pie global moderno es redundante. Mantén textos de enlaces comprensibles y foco visible; la forma de anunciar las regiones puede variar entre navegador y lector de pantalla.
Errores y preguntas frecuentes
¿Footer siempre queda abajo? No. Si aparece antes de lo esperado, revisa su posición en el documento y el CSS del contenedor. Si se superpone al texto, busca reglas como position: fixed o absolute; la cuadrícula del ejemplo conserva el flujo.
¿Un artículo puede tener su propio footer? Sí. Colócalo dentro del artículo para atribuirle su firma y otros datos. El pie global debe quedar fuera de esa pieza.
¿Por qué no aparece? Comprueba que tenga contenido y revisa hidden, display: none, colores y reglas que lo desplacen. Un pie vacío no proporciona información útil.
¿Puedo anidar pies para agrupar enlaces? No. Usa una lista o un <div> dentro del pie existente. Comprueba también que no estés colocando toda una noticia con su propio pie dentro del pie global.
Compatibilidad y fuentes
<footer> tiene soporte consolidado en Chrome, Edge, Firefox y Safari actuales, según MDN, consultado el 3 de octubre de 2026. El ejemplo no depende de scripts; conserva contenido y enlaces al desactivar JavaScript, y se lee en orden al retirar CSS.
El soporte visual del elemento no garantiza idéntico comportamiento accesible. MDN documenta que, antes de Safari 13, VoiceOver no exponía correctamente contentinfo. Si necesitas ese entorno antiguo, comprueba el pie global con esa combinación antes de adoptar una solución de compatibilidad; esa incidencia no justifica cambiar los roles de pies de artículo. Consulta el aviso de accesibilidad de MDN.