Docs ejecutables de HTML: Footer en HTML

Q: ¿Cómo escribo el símbolo de copyright en HTML?

Usa la entidad ©, que muestra ©. También puedes escribir el carácter directamente cuando la página usa . Envolver la línea en la marca como letra pequeña.

Q: ¿Una página puede tener más de un footer?

Sí. Cada o puede tener su propio footer para los datos del autor o las etiquetas. Solo un footer que no está dentro de article, aside, main, nav o section es el landmark contentinfo de la página para los lectores de pantalla.

Pon el contenido de cierre de tu página en un elemento <footer>, normalmente lo último dentro de <body>. Igual que <header>, no tiene aspecto por defecto; el CSS lo convierte en una barra de pie de página:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© muestra el símbolo ©. <small> marca la línea de copyright como letra pequeña, que es su significado en HTML, no solo una fuente más pequeña. Las listas de enlaces son listas <ul> reales, así que la mayoría de los lectores de pantalla anuncian cuántos enlaces tiene cada columna.

En una página con poco contenido, el footer queda justo debajo de ese contenido, con espacio vacío debajo. La solución es una columna flex: el contenedor es al menos tan alto como la ventana, y el área principal ocupa toda la altura sobrante. La caja gris de abajo hace de ventana del navegador:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

Quita flex: 1 de main y el footer sube hasta quedar bajo el párrafo. En una página real, pon las mismas reglas en <body> con min-height: 100vh (y margin: 0) en lugar de una altura fija, así el footer queda al final de las páginas cortas y después del contenido en las largas.

Footers dentro de artículos

Un <footer> cierra su article o section más cercano, así que una entrada de blog o un comentario pueden tener el suyo, con el autor, la fecha o las etiquetas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

Los lectores de pantalla solo tratan el footer de nivel de página como el landmark contentinfo. Un footer dentro de un artículo es un grupo normal, así que no compite con el pie del sitio.

Datos de contacto con address

Para la información de contacto de la página o de su propietario, usa <address> dentro del footer. Es solo para datos de contacto (no para cualquier dirección postal de tu contenido), y los navegadores lo muestran en cursiva por defecto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

El salto de línea dentro de la dirección es uno de los buenos usos de <br>. Para más sobre los enlaces de correo, consulta la página de mailto.

Un footer puede contener enlaces, listas, formularios (una suscripción al boletín), imágenes y un <nav>. No puede contener un <header>, otro <footer> ni un <main>. Un segundo menú en el footer puede ser un <nav> con una etiqueta que lo distinga del principal:

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Errores comunes

Poner <footer> fuera de <body>. Todo lo visible va dentro de <body>, el footer incluido.
Usar position: fixed para mantenerlo abajo. Un footer fijo tapa contenido en las pantallas pequeñas y necesita padding en todas partes. Usa el patrón de columna flex.
Usar <address> para cualquier dirección. Es para los datos de contacto del autor de la página o del artículo. La dirección de una tienda en una lista de ubicaciones es un <p> normal.
Columnas de enlaces hechas con etiquetas <br>. Usa listas <ul> para que se anuncie la estructura.
Dejar fijo el año pasado. Actualiza el año del copyright en tu plantilla, o imprímelo desde tu servidor o tu paso de compilación.

Preguntas frecuentes

¿Qué es la etiqueta footer en HTML?

<footer> es un elemento semántico para el contenido de cierre de una página o sección: copyright, datos de contacto, enlaces relacionados o información del autor. Es una caja de bloque sin estilo por defecto.

¿Qué debe ir en el footer de un sitio web?

Los pies de página típicos contienen el aviso de copyright, enlaces a páginas legales como privacidad y condiciones, datos de contacto, enlaces a redes sociales y un pequeño mapa del sitio. Mantén también la navegación principal en <nav> cerca de la parte superior, porque no todos los visitantes bajan hasta el final.

¿Cómo mantengo el footer abajo de la página?

Convierte el body en una columna flex al menos tan alta como la ventana (display: flex; flex-direction: column; min-height: 100vh;) y dale a <main> flex: 1. El área principal crece entonces para llenar el espacio vacío y empuja el footer hacia abajo en las páginas cortas.

¿Cómo escribo el símbolo de copyright en HTML?

Usa la entidad ©, que muestra ©. También puedes escribir el carácter directamente cuando la página usa <meta charset="utf-8">. Envolver la línea en <small> la marca como letra pequeña.

¿Una página puede tener más de un footer?

Sí. Cada <article> o <section> puede tener su propio footer para los datos del autor o las etiquetas. Solo un footer que no está dentro de article, aside, main, nav o section es el landmark contentinfo de la página para los lectores de pantalla.

Conceptos relacionados