Etiqueta HTML <footer>
La etiqueta <footer> define el pie de página de un sitio web o sección. Descripción, atributos y ejemplos.
La etiqueta <footer> define el pie de página de un sitio web o de un <section>, <article> u otro elemento de seccionamiento. Un pie de página suele contener información sobre derechos de autor y autoría, datos de contacto, enlaces de navegación, documentos relacionados o un enlace "volver arriba".
Esta página explica para qué sirve <footer>, cómo se corresponde con un punto de referencia de accesibilidad, por qué debería usarse en lugar de un <div> genérico, y cómo colocar pies de página a nivel de página y a nivel de artículo en la misma página.
El elemento <footer> es uno de los elementos semánticos de HTML5.
Un <footer> típico puede contener:
- información sobre derechos de autor, autoría y contacto
- documentos relacionados
- un mapa del sitio
- enlaces "volver arriba"
Si el pie de página contiene datos de contacto, envuélvalos en la etiqueta <address>.
¿Por qué usar <footer> en lugar de un <div>?
Visualmente, <footer> y <div class="footer"> se renderizan igual: ambos son cajas de nivel de bloque sin estilos predeterminados más allá de eso. La diferencia es el significado, y ese significado tiene beneficios reales:
- Accesibilidad. Cuando
<footer>es hijo directo de<body>, los navegadores lo exponen como el punto de referencia ARIAcontentinfo. Los usuarios de lectores de pantalla pueden saltar directamente a él con un atajo de punto de referencia, y la tecnología de asistencia anuncia "información de contenido" para que sepan en qué región se encuentran. Un<div>no transmite nada de esto. - SEO y legibilidad por máquinas. Los motores de búsqueda y las herramientas de modo lector utilizan las regiones semánticas para comprender la estructura de la página. Un
<footer>señala claramente metadatos suplementarios a nivel de página o sección. - Esquema del documento y mantenibilidad. Las etiquetas semánticas hacen que el marcado sea autodescriptivo, de modo que el siguiente desarrollador (o usted mismo, meses después) pueda leer la estructura de un vistazo.
Use <footer> siempre que el contenido sea genuinamente material de pie de página. Use un <div> solo para agrupar de forma genérica y sin significado.
El punto de referencia contentinfo
El rol ARIA al que se asigna un <footer> depende de dónde se encuentre:
- Un
<footer>que es hijo directo de<body>se convierte en el punto de referenciacontentinfo, es decir, el pie de página de toda la página. Solo debe haber uno de estos pies de página a nivel de página. - Un
<footer>anidado dentro de<article>,<section>,<aside>,<nav>o<main>no es un punto de referencia: no tiene el rolcontentinfo. Simplemente marca el pie de ese fragmento de contenido, y puede haber tantos como secciones tenga.
Por eso puede agregar con seguridad un pie de página a cada artículo de una página sin confundir a la tecnología de asistencia: solo el de nivel superior es el contentinfo de la página.
Sintaxis
La etiqueta <footer> va en pares. El contenido se escribe entre las etiquetas de apertura (<footer>) y cierre (</footer>).
Ejemplo de un <footer> a nivel de página:
El pie de página siguiente es hijo directo de <body>, por lo que actúa como el punto de referencia contentinfo de la página.
Etiqueta HTML <footer>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
.main-content {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<div class="header">Header / Menu</div>
<div class="main-content">
<h1>Main content</h1>
<p>This is some paragraph. </p>
</div>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Pies de página dentro de <article> y un pie de página global juntos
Puede tener varios elementos <footer> en una misma página. Un patrón habitual es un pie de página por cada <article> (para el autor, la fecha o las etiquetas de ese artículo) más un único pie de página a nivel de página al final. Los pies de página de los artículos no son puntos de referencia; solo el del nivel <body> es contentinfo.
<!DOCTYPE html>
<html>
<body>
<main>
<article>
<h2>First post</h2>
<p>Some article content...</p>
<footer>
<p>Posted by Jane Doe on 2026-06-18 · Filed under HTML</p>
</footer>
</article>
<article>
<h2>Second post</h2>
<p>More article content...</p>
<footer>
<p>Posted by John Smith on 2026-06-17 · Filed under CSS</p>
</footer>
</article>
</main>
<!-- Page-level footer: this one is the contentinfo landmark -->
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Consulte también los elementos de seccionamiento relacionados: <header>, <main>, <section> y <article>.
Restricción de anidamiento
Un <footer> no puede contener otro <footer> ni un <header> como descendiente. El siguiente marcado es inválido:
<!-- Invalid: a footer nested inside a footer -->
<footer>
<p>Site footer</p>
<footer>
<p>This nested footer is not allowed.</p>
</footer>
</footer>Si necesita un pie de página para una subsección, dé a esa sección su propio elemento de seccionamiento (como <article> o <section>) y coloque el pie de página dentro de él.
Atributos
La etiqueta <footer> admite los Atributos Globales y los Atributos de Evento.
Aplicar estilos a <footer>
<footer> no tiene estilos predeterminados especiales: es simplemente un elemento de nivel de bloque, por lo que se estiliza como cualquier otra caja. Un aspecto habitual es una barra oscura y centrada:
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}