W3docs
de
Anmelden

HTML <footer>-Tag

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

Das <footer>-Element definiert den Footer einer Webseite oder eines Abschnitts. In der Regel enthält es Urheberrechtsinformationen, Kontaktdaten, Navigationslinks usw.

Auf einer Webseite können Sie mehrere <footer>-Elemente verwenden. Sie können beispielsweise einen Footer innerhalb des <article>-Elements platzieren, um Informationen im Zusammenhang mit dem Artikel zu speichern (Links, Fußnoten usw.).

Das Element kann andere HTML-Elemente enthalten, darf jedoch kein weiteres <footer>- oder <header>-Element enthalten, wenn diese Nachkommen desselben Abschnittsinhalts sind.

Das <footer>-Element ist eines der HTML5-Elemente.

Erfolg

Wenn der Footer Kontaktdaten enthält, sollten Sie ihn in das <address>-Element einfügen.

Das <footer>-Element kann Folgendes enthalten:

  • Urheberrechtsinformationen, Autorenhinweise und Kontaktdaten
  • Verwandte Dokumente
  • Sitemap
  • Links nach oben

Syntax

Das <footer>-Element wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<footer>) und dem schließenden (</footer>)-Tag geschrieben.

HTML <footer>-Tag

<!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>
Probier es selbst »

Ergebnis

Beispiel für das footer-Tag

Attribute

Das <footer>-Element unterstützt die Globalen Attribute und Ereignisattribute.

So stylen Sie ein HTML <footer>-Element

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

Praxis

Übung

Welche Funktion hat das HTML &lt;footer&gt;-Element und wo wird es auf einer Webseite platziert?

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