Etiqueta HTML `<footer>`

La etiqueta <footer> define el pie de página de una página web o de una sección. Por lo general, contiene información de derechos de autor, datos de contacto, enlaces de navegación, etc.

Puedes tener varias etiquetas <footer> en una página web. Por ejemplo, puedes colocar un pie de página dentro de la <article> para almacenar información relacionada con el artículo (enlaces, notas al pie, etc.).

La etiqueta puede contener otros elementos HTML, pero no puede contener otra <footer> o <header> si son descendientes del mismo contenido de sección.

<footer> es uno de los elementos HTML5.

éxito
Si el pie de página contiene datos de contacto, debes colocarlo dentro de la <address>.

El elemento <footer> puede contener lo siguiente:

información de derechos de autor, autoría y contacto
documentos relacionados
mapa del sitio
enlaces para volver arriba

Sintaxis

La etiqueta <footer> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<footer>) y cierre (</footer>).

Ejemplo de la etiqueta HTML `<footer>`:

Etiqueta HTML <footer>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .header {
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      .main-content {
        height: 60vh;
        padding: 20px;
      }
      footer {
        padding: 10px 20px;
        background: #666;
        color: white;
      }
      a {
        color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div class="header">Header / Menu</div>
    <div class="main-content">
      <h1>Main content</h1>
      <p>This is some paragraph. </p>
    </div>
    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>

Try it Yourself »

Resultado

ejemplo de etiqueta footer

Atributos

La etiqueta <footer> admite los Atributos globales y los Atributos de eventos.

Cómo dar estilo a una etiqueta HTML <footer>

css

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

Práctica

¿Cuál es la función de la etiqueta HTML <footer> y en qué parte de una página web se coloca?

La etiqueta HTML <footer> se utiliza para definir un pie de página para una página web o una sección y puede colocarse al final del elemento <body> o al final de un elemento <section>.La etiqueta HTML <footer> se utiliza para crear un encabezado para una página web y se coloca al principio.La etiqueta HTML <footer> establece una introducción para una página web y se coloca al principio del elemento <body>.La etiqueta HTML <footer> normalmente contiene información sobre el autor del documento, información de derechos de autor y enlaces.La etiqueta HTML <footer> se utiliza para crear un pie de página para una página web y solo puede colocarse al final del elemento <body>.La etiqueta HTML <footer> normalmente incluye la navegación principal del sitio web, anuncios y material promocional.

Etiqueta HTML <footer> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <footer>: ​

Resultado ​