Etiqueta footer en HTML
¿Qué es la etiqueta <footer> en HTML?
La etiqueta <footer> es una de las nuevas etiquetas semánticas introducidas en HTML5 que se utiliza para representar la sección de pie de página de un documento web.
Es común utilizarla para incluir información sobre el autor del sitio web, la fecha de publicación, enlaces a páginas relacionadas o cualquier otra información relevante que se desee mostrar en el pie de página.
La etiqueta <footer> se coloca dentro del elemento <body> y debe contener información relacionada con el contenido del documento. A menudo se utiliza junto con otras etiquetas semánticas como <header>, <nav>, <section>, entre otras.
Ejemplo de uso
Aquí te dejo un ejemplo básico de cómo se utiliza la etiqueta <footer>:
<!DOCTYPE html>
<html>
<head>
<title>Mi sitio web</title>
</head>
<body>
<header>
<h1>Encabezado de mi sitio web</h1>
</header>
<nav>
<!-- Menú de navegación aquí -->
</nav>
<section>
<!-- Contenido principal del sitio web aquí -->
</section>
<footer>
<p>Derechos de autor © 2023. Mi sitio web.</p>
<p>Contáctanos en info@misitioweb.com</p>
</footer>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza la etiqueta <footer> para incluir información de contacto y derechos de autor en el pie de página de un sitio web.
Recuerda que el contenido específico que se incluye en la etiqueta <footer> dependerá del propósito y el contenido del sitio web.
Atributos
La etiqueta <footer> no tiene atributos específicos propios, pero admite los atributos globales de HTML5.
A continuación, te listo algunos de los atributos globales más comunes que se utilizan con la etiqueta <footer>:
- class: Este atributo se utiliza para asignar una o varias clases CSS a la etiqueta <footer>, lo que permite aplicar estilos específicos a través de una hoja de estilo CSS.
- id: Este atributo se utiliza para asignar un identificador único a la etiqueta <footer>, lo que permite referenciarla desde otras partes del documento, como desde un enlace o una hoja de estilo CSS.
- style: Este atributo se utiliza para aplicar estilos CSS directamente a la etiqueta <footer>, sin necesidad de definirlos en una hoja de estilo CSS separada.
- title: Este atributo se utiliza para proporcionar un texto descriptivo que se mostrará cuando se coloca el cursor sobre la etiqueta <footer>.
- tabindex: Este atributo se utiliza para controlar el orden de tabulación de la etiqueta <footer> cuando se utiliza la tecla Tab para navegar por el sitio web.
- role: Este atributo se utiliza para especificar el papel semántico de la etiqueta <footer>, es decir, la función que cumple en el documento web.
- lang: Este atributo se utiliza para especificar el idioma principal de la etiqueta <footer>, lo que puede ayudar a los motores de búsqueda y otros agentes de usuario a comprender el contenido del documento en diferentes idiomas.
- hidden: Este atributo se utiliza para ocultar la etiqueta <footer> del documento, lo que puede ser útil para los dispositivos de asistencia que no necesitan mostrar la información de pie de página.
Es importante mencionar que los atributos globales de HTML5 pueden ser aplicados a cualquier etiqueta HTML, no solo a la etiqueta <footer>.
Ejemplo
Aquí te proporciono un ejemplo completo de cómo se puede utilizar la etiqueta <footer> con algunos atributos globales comunes en HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de uso de la etiqueta footer</title>
</head>
<body>
<h1>Título del documento</h1>
<p>Contenido del documento.</p>
<footer class="footer" id="pie-pagina" lang="es">
<p>Este es el pie de página.</p>
</footer>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, la etiqueta <footer> se utiliza para definir el pie de página del documento. La clase “footer” y el ID “pie-pagina” se asignan a la etiqueta <footer> para que se puedan aplicar estilos CSS específicos y para que se pueda referenciar la etiqueta desde otras partes del documento.
El atributo “lang” se establece en “es” para especificar que el idioma principal del pie de página es español. Dentro de la etiqueta <footer>, se utiliza la etiqueta <p> para agregar contenido al pie de página.
Es importante mencionar que el ejemplo anterior es solo una ilustración de cómo se pueden usar los atributos globales comunes con la etiqueta <footer>. En la práctica, los atributos utilizados con la etiqueta <footer> pueden variar según las necesidades de cada proyecto web.
Más ejemplos
Aquí te proporciono dos ejemplos avanzados de cómo se puede utilizar la etiqueta <footer> en HTML5:
Ejemplo 1
Pie de página con enlaces y logo
<!DOCTYPE html>
<html>
<head>
<title>Pie de página con enlaces y logo</title>
<style>
.footer {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.footer-logo {
width: 100px;
}
.footer-links a {
color: #666;
text-decoration: none;
margin: 0 10px;
}
</style>
</head>
<body>
<h1>Título del documento</h1>
<p>Contenido del documento.</p>
<footer class="footer">
<img class="footer-logo" src="logo.png" alt="Logo de la empresa">
<div class="footer-links">
<a href="#">Aviso legal</a>
<a href="#">Política de privacidad</a>
<a href="#">Términos y condiciones</a>
</div>
</footer>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, la etiqueta <footer> se utiliza para definir el pie de página del documento, el cual incluye un logo de la empresa y una lista de enlaces a las páginas de aviso legal, política de privacidad y términos y condiciones.
Se aplican algunos estilos CSS para darle un aspecto atractivo al pie de página, incluyendo un fondo gris claro, un padding de 20px y un texto centrado.
La clase “footer-links” se utiliza para aplicar un margen de 10px a los enlaces y evitar que estén pegados entre sí.
Ejemplo 2
Pie de página con fecha de actualización automática
<!DOCTYPE html>
<html>
<head>
<title>Pie de página con fecha de actualización automática</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
var fecha = new Date();
var ano = fecha.getFullYear();
var mes = fecha.getMonth() + 1;
var dia = fecha.getDate();
var fechaActual = dia + '/' + mes + '/' + ano;
var elementoFecha = document.getElementById("fecha-actualizacion");
elementoFecha.innerHTML = 'Última actualización: ' + fechaActual;
});
</script>
</head>
<body>
<h1>Título del documento</h1>
<p>Contenido del documento.</p>
<footer>
<p id="fecha-actualizacion"></p>
</footer>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, la etiqueta <footer> se utiliza para definir el pie de página del documento, el cual incluye la fecha de la última actualización del documento.
Se utiliza JavaScript para obtener la fecha actual y actualizar el contenido del elemento con ID “fecha-actualizacion” en el pie de página.
Al cargar la página, la función anónima asociada al evento “DOMContentLoaded” obtiene la fecha actual, formatea la fecha como una cadena de texto y la asigna al contenido del elemento “fecha-actualizacion”.
De esta manera, cada vez que se cargue la página, se mostrará la fecha de la última actualización del documento.