La etiqueta <footer> en HTML se utiliza para definir un pie de página de un documento HTML. Esta sección contiene la información de pie de página (información del autor, información de derechos de autor, proveedores, etc.). La etiqueta de pie de página se utiliza dentro de la etiqueta del cuerpo. La etiqueta <footer> es nueva en HTML5. Los elementos de pie de página requieren una etiqueta de inicio y una etiqueta de finalización.
Sintaxis:
<footer> ... </footer>
Un elemento de pie de página normalmente contiene información de autoría, información de derechos de autor, información de contacto, mapa del sitio, enlaces de regreso al principio, documentos relacionados, etc.
Los siguientes ejemplos ilustran la etiqueta <footer> en elementos HTML:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <!--HTML footer tag starts here--> <footer> <a href= "https://www.geeksforgeeks.org/about/">About Us</a>| <a href= "https://www.geeksforgeeks.org/privacy-policy/">Privacy Policy</a>| <a href= "https://www.geeksforgeeks.org/careers/">Careers</a> <p>@geeksforgeeks, Some rights reserved</p> </footer> <!--HTML figcaption tag ends here--> </body> </html>
Producción:
Ejemplo 2: uso de CSS en la etiqueta de pie de página
HTML
<!DOCTYPE html>
<html>
<head>
<title>footer tag</title>
<style>
.column {
float: left;
width: 27%;
height: 300px;
}
p {
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<!--HTML footer tag starts here-->
<footer>
<div class="column">
<p>Company</p>
<ul style="list-style-type:disc">
<li>About Us</li>
<li>Careers</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</div>
<div class="column">
<p>Learn</p>
<ul>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Languages</li>
<li>CS Subjects</li>
<li>Video Tutorials</li>
</ul>
</div>
<div class="column">
<p>Practice</p>
<ul>
<li>Company-wise</li>
<li>Topic-wise</li>
<li>Contests</li>
<li>Subjective Questions</li>
</ul>
</div>
</footer>
<!--HTML figcaption tag ends here-->
</body>
</html>
Producción:
Navegadores compatibles:
- Google cromo 5
- Borde 12
- Internet Explorer 9.0
- Firefox 4.0
- Ópera 11.1
- Safari 5.0
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA