Hoy veremos una etiqueta de HTML que tienes que usar sí o sí (como se suele decir).
A continuación, te voy a hablar de la etiqueta Footer, una etiqueta tan simple como útil, y que, a partir de ahora, vas a usar siempre en tus páginas web.
Y es posible que alguien diga: “Bah.., yo ya sé para qué sirve la etiqueta Footer”
Sí, es verdad, puede ser…
Pero ¿A que no sabes que esta etiqueta tiene varios usos?
¡Ah, amigo! ¿Eso no lo sabías, eh? Pues sigue leyendo.
Por cierto, antes de empezar quiero recordarte que este artículo forma parte de la serie del diccionario de HTML del canal de DropCoding donde puedes aprender todas las etiquetas de este lenguaje.
Y ahora, vamos con la etiqueta Footer.
¿Qué es el footer en HTML?
Cuando hablamos de footer en HTML nos referimos a la sección de pie de página de un documento o página web.
Esta sección normalmente contiene información como los derechos de autor, enlaces a pestañas legales, información de contacto, el logo, y otros elementos.
La gran pregunta: ¿dónde va el footer? Pues dónde va a ir 🤔, debajo del todo de nuestro sitio.
¡Pero OJO! Aquí hay mucha gente que se equivoca.
Es que el footer va siempre dentro de la etiqueta body.
¿Qué significa esto? Pues significa que primero vas a colocar el Header (que es una etiqueta que veremos en los próximos artículos) y luego va el Body.
Dentro del Body vamos a colocar las etiquetas semánticas de esta manera:
- Header
- Main
- Footer
Que no te pase como a mí al principio, que colocaba por un lado el header, por otro lado el body y luego el footer… fatal.
Y por si te lo estás preguntando: ¿Qué quiere decir footer? Footer se traduciría como pie de página. No tiene más misterio.
Y ahora, vamos con un ejemplo.
Ejemplo: Cómo usar un footer
Dentro de la etiqueta Body tenemos un Header, una etiqueta Main, y finalmente tenemos la etiqueta Footer que sería la sección del pie de página, como hemos visto.
<body>
<header>
<h1>Bienvenido a Mi Página Web</h1>
</header>
<main>
<section>
<h2>Sección Principal</h2>
<p>Este es el contenido principal de la página.</p>
</section>
</main>
<footer>
<div class="footer-content">
<p>Derechos de autor © 2023 - www.dropcoding.com</p>
<div class="footer-links">
<a href="/terminos-de-servicio">Términos de servicio</a>
<a href="/contacto">Contacto</a>
</div>
</div>
</footer>
</body>Dentro del footer puedes poner lo que quieras.
Ojo, yampoco hace falta que hagas un footer que sea una Biblia.
Simplemente puedes hacer un footer que contenga información relevante o útil para el usuario.
En el ejemplo que estás viendo tenemos una etiqueta <div> que sería el envoltorio principal del footer, donde hay un párrafo con los derechos de autor, el año, la página web…
Luego, podría haber otro envoltorio, o una lista de enlaces hacia los términos de servicio, página de contacto, o lo que tu quieras.
Ahora te puedes estar preguntando: David ¿Siempre tiene que ser tan cutre? Pues no, no hace falta.
Vamos a ver un ejemplo de mi propio blog de davidzamora.blog:
Primero tendríamos el nombre del blog, luego algunos enlaces útiles, los derechos de autor (esto evidentemente lo tienes que hacer de forma dinámica sino lo tendrás que ir cambiando cada año), y luego a la derecha tendríamos los enlaces hacia las redes sociales, y luego los enlaces a las pestañas legales.
Esta es una manera de hacerlo, pero hay un montón de maneras de hacer un pue de página.
OJO aquí, porque ahora viene lo bueno: Aunque el uso más común de esta etiqueta es para marcar el pie de página de un sitio web, también se puede emplear dentro de secciones específicas del documento HTML, es decir, la etiqueta footer no solamente se puede utilizar para crear el pie de página de tu sitio web, sino que también se puede usar en otras secciones.
Veamos un ejemplo:
<div class="grid-articulos">
<article>
<h2>Título del Artículo</h2>
<p>Este es el contenido del artículo...</p>
<footer>
<p>Publicado el 4 de Diciembre de 2023 por Autor</p>
</footer>
</article>
</div>Fíjate aquí lo que te decía: Tenemos, dentro del body, una sección que podría ser una sección para mostrar los artículos del blog llamada grid-artículos.
Dentro de esta sección tenemos cada artículo enmarcado en una etiqueta <article>. Aquí podríamos tener el título, el párrafo, o incluso también una imagen, o lo que quieras.
Luego podrías marcar el footer con información original, en este ejemplo he puesto “publicado el 4 de Diciembre de 2023”.
También podrías poner el autor, o lo que quieras. Esta sería otra forma de utilizar la etiqueta footer. ¿A que no lo sabías?
Espero que te haya resultado útil este artículo.
Como siempre recuerda que si tienes alguna pregunta o sugerencia puedes dejarla en los comentarios, no seas tímido.
Nos vemos en el siguiente episodio. ¡Adiós!