La etiqueta HTML <footer> representa el pie de un documento HTML o de una sección dentro del documento. Por lo general, los pies (de página) contienen información como el autor del documento, información de derechos de autor, enlaces a términos de uso, política de privacidad, etc.
Sintaxis
La etiqueta <footer> se escribe como <footer></footer> con el contenido del pie insertado entre las etiquetas de inicio y fin.
Ejemplo:
<footer>
Contenido del pie...
</footer>La etiqueta <footer> se puede colocar en cualquier lugar donde se espere “contenido en flujo” (generalmente en cualquier lugar dentro del cuerpo – body– del documento). Sin embargo, no se puede colocar dentro de una etiqueta <header> ni dentro de otra etiqueta <footer>, y no puede contener una etiqueta <header>.
Ejemplos
Uso básico de la etiqueta
Aquí tienes un ejemplo de la etiqueta <footer> utilizada para marcar el pie de un documento completo.
<!doctype html>
<html>
<head>
<title>Título de la página...</title>
</head>
<body>
<header>
<h1>Encabezado</h1>
<b><p>Contenido del encabezado...</p></b>
</header>
<nav>
Contenido de la navegación...
</nav>
<main>
<article>
<p>Contenido del artículo...</p>
</article>
</main>
<footer>
Contenido del pie...
</footer>
</body>
</html>
Pie en la parte superior del documento
La etiqueta <footer> no necesariamente debe aparecer en la parte inferior del documento (aunque este es probablemente el uso más común).
Aquí tienes un ejemplo de cómo colocar la etiqueta <footer> cerca del principio del documento.
<!doctype html>
<html>
<head>
<title>Título de la página...</title>
</head>
<body>
<footer>
Contenido del pie...
</footer>
<main>
<article>
<p>Contenido del artículo...</p>
</article>
</main>
</body>
</html>
Varios elementos <footer>
Un documento puede tener múltiples elementos <footer>. Aquí tienes un ejemplo de un documento con dos pies (uno en la parte superior y otro en la parte inferior).
<!doctype html>
<html>
<head>
<title>Título de la página...</title>
</head>
<body>
<footer>
<a href="/">Inicio</a>
</footer>
<main>
<article>
<p>Contenido del artículo...</p>
</article>
</main>
<footer>
<a href="/">Inicio</a>
</footer>
</body>
</html>
Secciones Pies (Footers)
Al igual que un documento completo puede contener elementos <footer>, cada sección dentro de un documento también puede tener los suyos. Aquí, tenemos dos elementos <article> que contienen sus propios pies respectivos. El documento en sí tiene su propio pie separado.
<!doctype html>
<html>
<head>
<title>Título de la página...</title>
</head>
<body>
<main>
<article>
<p>Contenido del artículo...</p>
<footer>
Contenido del pie...
</footer>
</article>
<article>
<p>Contenido del artículo...</p>
<footer>
Contenido del pie...
</footer>
</article>
</main>
<footer>
Contenido del pie...
</footer>
</body>
</html>
Direcciones
Los pies a menudo contienen información de contacto del autor del documento. La información de contacto dentro de una etiqueta <footer> debe marcarse utilizando la etiqueta <address>.
<!doctype html>
<html>
<head>
<title>Título de la página...</title>
</head>
<body>
<main>
<article>
<p>Contenido del artículo...</p>
</article>
</main>
<footer>
<address>
Contacto: <a href="mailto:hola@htmldesdecero.es">Homer Programmer</a>
</address>
</footer>
</body>
</html>Atributos
Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo debe aparecer o comportarse el elemento.
La etiqueta <footer> acepta los siguientes atributos.Atributo Descripción Ninguno
Atributos globales
Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes usar estos atributos con la etiqueta <footer>, al igual que con todas las demás etiquetas HTML.
- accesskey
- autocapitalize
- class
- contenteditable
- data-*
- dir
- draggable
- hidden
- id
- inputmode
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- part
- slot
- spellcheck
- style
- tabindex
- title
- translate
Para obtener una explicación completa de estos atributos, consulta los atributos globales de HTML5.
