W3docs
es
Iniciar sesión

Etiqueta HTML <footer>

The <footer> tag defines the footer of a website or a section. Tag description, attributes and examples.

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>).

Etiqueta HTML <footer>

<!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>
Pruébalo tú mismo »

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>

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

Práctica

Práctica

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