HTML `<footer>`-Tag

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.

Beispiel für das HTML `<footer>`-Element:

HTML <footer>-Tag

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 »

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

css

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

Praxis

Welche Funktion hat das HTML <footer>-Element und wo wird es auf einer Webseite platziert?

Das HTML <footer>-Element wird verwendet, um einen Footer für eine Webseite oder einen Abschnitt zu definieren und kann am Ende des <body>-Elements oder am Ende eines <section>-Elements platziert werden.Das HTML <footer>-Element wird verwendet, um einen Header für eine Webseite zu erstellen und wird am Anfang platziert.Das HTML <footer>-Element richtet eine Einführung für eine Webseite ein und wird am Anfang des <body>-Elements platziert.Das HTML <footer>-Element enthält typischerweise Informationen über den Autor des Dokuments, Urheberrechtsinformationen und Links.Das HTML <footer>-Element wird verwendet, um einen Footer für eine Webseite zu erstellen und kann nur am Ende des <body>-Elements platziert werden.Das HTML <footer>-Element enthält typischerweise die Hauptnavigation der Website, Werbung und Werbematerial.

css

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

HTML <footer>-Tag ​

Syntax ​

Beispiel für das HTML <footer>-Element: ​

Ergebnis ​