La Etiqueta FOOTER

Es un elemento semántico de HTML5 que define el pie de página de una página web o de una sección específica.

La etiqueta <footer> es un elemento semántico de HTML5 que define el pie de página de una página web o de una sección específica. Contiene información relevante como datos de contacto, enlaces útiles, derechos de autor o créditos, mejorando la accesibilidad y la estructura del documento.

Sintaxis básica

<footer>
  <!-- Contenido del pie de página -->
</footer>

Ubicación típica: Al final del <body> o dentro de <article>, <section>, etc.
Contenido común:
- Información de contacto.
- Enlaces a redes sociales o políticas de privacidad.
- Derechos de autor (© 2023 Tu Sitio Web).
- Menús secundarios.

Casos de uso comunes

Pie de página global del sitio

<footer>
  <p>© 2023 Mi Sitio Web. Todos los derechos reservados.</p>
  <nav>
    <a href="/politica-privacidad">Política de privacidad</a>
    <a href="/contacto">Contacto</a>
  </nav>
</footer>

Pie de página de una sección o artículo

<article>
  <h2>El futuro de la IA</h2>
  <p>Contenido del artículo...</p>
  <footer>
    <p>Escrito por: <a href="/autor/juan">Juan Pérez</a></p>
  </footer>
</article>

Pie de página con información de contacto

<footer>
  <address>
    Calle Falsa 123, Ciudad Ejemplo<br>
    <a href="mailto:info@ejemplo.com">info@ejemplo.com</a><br>
    <a href="tel:+123456789">+123 456 789</a>
  </address>
</footer>

Accesibilidad

Lectores de pantalla: Reconocen el <footer> como información complementaria.
Buenas prácticas:
- Usar encabezados (<h2>, <h3>) para secciones dentro del footer.
- Agregar atributos ARIA si es necesario (ej: aria-label="Pie de página").
- Incluir texto alternativo en enlaces e imágenes.

Estilización con CSS

Personaliza el diseño según tus necesidades:

footer {
  background: #2c3e50;
  color: white;
  padding: 2rem;
  margin-top: 3rem;
  text-align: center;
}

footer a {
  color: #3498db;
  text-decoration: none;
}

footer nav {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

Ejemplo de diseño responsive:

footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem 5%;
}

Errores comunes

Usar para contenido no relacionado

<!-- Incorrecto -->
<footer>
  <h2>Artículo destacado</h2> <!-- ¡No es parte del pie de página! -->
</footer>

Múltiples `<footer>` sin contexto

<!-- Incorrecto -->
<body>
  <footer>...</footer>
  <section>
    <footer>...</footer> <!-- Solo si está dentro de un artículo/sección -->
  </section>
</body>

Ignorar la semántica

<!-- Menos accesible -->
<div class="footer">...</div>

<!-- Correcto -->
<footer>...</footer>

Ejemplos avanzados

Footer con redes sociales y logo

<footer>
  <img src="logo.png" alt="Logo de la empresa" width="150">
  <div class="redes-sociales">
    <a href="#"><img src="facebook-icon.svg" alt="Facebook"></a>
    <a href="#"><img src="twitter-icon.svg" alt="Twitter"></a>
  </div>
  <p>Síguenos para más actualizaciones.</p>
</footer>

Footer con múltiples columnas

<footer>
  <div class="columna">
    <h3>Empresa</h3>
    <ul>
      <li><a href="/nosotros">Nosotros</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </div>
  <div class="columna">
    <h3>Legal</h3>
    <ul>
      <li><a href="/terminos">Términos de uso</a></li>
      <li><a href="/privacidad">Privacidad</a></li>
    </ul>
  </div>
</footer>

Buenas prácticas

Jerarquía clara: Usar encabezados (<h2>, <h3>) para organizar secciones.
Enlaces útiles: Incluir acceso a páginas importantes (ej: mapa del sitio).
Derechos de autor dinámicos:

<p>© <span id="year"></span> Mi Sitio Web</p>
<script>document.getElementById('year').textContent = new Date().getFullYear();</script>

Comparación: `<footer>` vs `<div>`

Elemento	Ventajas	Ejemplo
`<footer>`	Semántica clara, accesibilidad mejorada	`<footer>...</footer>`
`<div>`	Uso genérico sin significado implícito	`<div class="footer">...</div>`

Conclusión:

La etiqueta <footer> es esencial para:

Estructurar contenido de manera semántica.
Mejorar la accesibilidad y el SEO.
Organizar información relevante al final de páginas o secciones.

¡Úsala para crear sitios web más profesionales y accesibles!