<footer> — Frontend Classroom

<footer> es el elemento semántico para el pie de su sección más cercana. En el nivel de página — cuando es hijo directo de <body> — contiene la información de cierre del sitio: copyright, datos de autoría, links legales (privacidad, términos), links secundarios (mapa del sitio, redes sociales), año de publicación y cualquier metadato de pie que corresponda al sitio en su conjunto. Es el simétrico de <header>: así como <header> identifica el comienzo de una unidad de contenido, <footer> identifica su cierre.

Lo que sorprende a quienes ven <footer> por primera vez es que, igual que <header>, no es único por página. Puede aparecer dentro de un <article> para marcar el pie de ese artículo específico (datos del autor, fecha, tags, links relacionados), o dentro de una <section> para su pie. Esta multiplicidad tiene una condición: el <footer> de nivel de página (hijo de <body>) es el único que genera el landmark ARIA contentinfo. Los <footer> internos (dentro de <article>, <aside>, <main>, <nav> o <section>) tienen un rol genérico, sin landmark.

Esta distinción importa porque el landmark contentinfo permite a los usuarios de lectores de pantalla saltar directamente al pie del sitio para encontrar información de contacto, links legales o copyright. Si todos los <footer> internos de artículos también generaran ese landmark, el menú de landmarks se llenaría de entradas y perdería utilidad.

Cómo funciona

<footer> es un elemento de contenido de flujo con display block. Su rol de landmark depende del contexto de anidado:

Hijo directo de <body>: rol ARIA contentinfo. Los lectores de pantalla lo exponen como el pie del sitio y permiten saltar a él desde el menú de landmarks.
Dentro de <article>, <aside>, <main>, <nav> o <section>: rol genérico. No genera un landmark adicional. Esto evita que cada <footer> de artículo contamine el menú de landmarks.

A diferencia de <main>, <footer> puede repetirse. Una página con un <footer> de sitio y diez artículos con su propio <footer> es perfectamente válida — solo el de nivel de página genera el landmark contentinfo.

Modelo de contenido

<footer> acepta contenido de flujo con la restricción de que no puede contener <main> como descendiente. No puede contener otro <footer> ni <header> directamente anidados. El contenido típico incluye: <p> con copyright, <nav> con links secundarios, <address> con datos de contacto del autor, <small> para texto legal secundario.

Sintaxis

<!-- Footer de nivel de página -->
<footer>
  <nav aria-label="Links del sitio">
    <ul>
      <li><a href="/privacidad">Privacidad</a></li>
      <li><a href="/terminos">Términos</a></li>
      <li><a href="/contacto">Contacto</a></li>
    </ul>
  </nav>
  <p><small>© 2026 MiSitio. Todos los derechos reservados.</small></p>
</footer>

<!-- Footer interno de un artículo -->
<article>
  <h2>El futuro de HTML</h2>
  <p>HTML sigue siendo el lenguaje base de la web...</p>
  <footer>
    <p>Autor: <a href="/autores/ana">Ana García</a></p>
    <p>Publicado: <time datetime="2026-06-17">17 de junio de 2026</time></p>
  </footer>
</article>

Atributos

<footer> no tiene atributos propios. Acepta todos los atributos globales de HTML. En la práctica, los más usados son class (para estilos CSS) e id (como destino de un ancla).

Rol de landmark y accesibilidad

El rol ARIA implícito de <footer> cuando es hijo de <body> es contentinfo. Este landmark indica que el bloque contiene información de cierre del sitio: autoría, copyright, privacidad — metadata que aplica al sitio o al documento como un todo, no a una sección específica.

Los usuarios de lectores de pantalla pueden navegar directamente al landmark contentinfo desde el menú de landmarks. Esto es útil cuando alguien busca la información de copyright, los datos de contacto o los links legales sin tener que recorrer todo el contenido de la página.

La condición del contexto: dentro de <article>, <aside>, <main>, <nav> o <section>, el <footer> pierde el rol contentinfo y tiene rol genérico. Esto es un espejo exacto del comportamiento de <header> con su rol banner — ambos tienen rol de landmark solo al nivel de página.

Cuándo usar `<footer>` / cuándo no

Situación	Qué usar
Pie de página del sitio (copyright, links legales)	`<footer>` como hijo de `<body>`
Metadatos de autoría y fecha al pie de un `<article>`	`<footer>` dentro del `<article>`
Información de cierre de una `<section>`	`<footer>` dentro de la `<section>`
Nota al margen relacionada con el artículo	`<aside>`, no `<footer>`
Banner publicitario al final de la página	No usar `<footer>` — no es información de cierre del sitio

Notas, gotchas e interacción

<footer> no posiciona nada. No aparece “abajo” por ser <footer>. Que esté al final de la página es porque se escribe al final del HTML — el flujo normal del documento lo ubica ahí. Fijarlo visualmente al pie del viewport cuando hay poco contenido requiere CSS (normalmente flexbox en <body> con min-height: 100vh).
<address> es su compañero natural. El elemento <address> es para información de contacto del autor o del sitio, y vive bien dentro de <footer>. No confundirlo con direcciones postales genéricas.
<small> para el copyright. Aunque no es obligatorio, <small> semánticamente correcto para texto legal de bajo peso como el copyright, que es exactamente el caso de uso para el que fue diseñado.
Un <footer> puede tener un <nav> adentro. La paginación en pie de artículo, el mapa del sitio o los links secundarios en el footer son candidatos perfectos para un <nav> dentro del <footer>.

Vigente / legacy

<footer> está completamente vigente desde HTML5. Su predecesor funcional, <div id="footer"> o <div class="footer">, es legacy: no genera el landmark contentinfo. No hay atributos propios de <footer> marcados como legacy.