W3docs
de
Anmelden

HTML <footer>-Tag

Der <footer>-Tag definiert die Fußzeile einer Website oder eines Abschnitts. Beschreibung, Attribute und Beispiele.

Der <footer>-Tag definiert die Fußzeile einer Webseite oder eines <section>-, <article>- oder anderen Gliederungselements. Eine Fußzeile enthält üblicherweise Copyright- und Autorenangaben, Kontaktdaten, Navigationslinks, verwandte Dokumente oder einen „Zurück nach oben"-Link.

Diese Seite erklärt, wofür <footer> gedacht ist, wie es einem Barrierefreiheits-Landmark zugeordnet wird, warum man es einem einfachen <div> vorziehen sollte und wie man seitenweite und artikelbezogene Fußzeilen auf derselben Seite platziert.

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

Eine typische <footer>-Fußzeile kann enthalten:

  • Copyright-, Autoren- und Kontaktinformationen
  • verwandte Dokumente
  • eine Sitemap
  • „Zurück nach oben"-Links
Tipp

Wenn die Fußzeile Kontaktdetails enthält, sollten diese im <address>-Tag eingeschlossen werden.

Visuell rendern <footer> und <div class="footer"> identisch — beide sind Block-Elemente ohne besondere Standardformatierung. Der Unterschied liegt in der Bedeutung, und diese Bedeutung hat reale Vorteile:

  • Barrierefreiheit. Wenn <footer> ein direktes Kindelement von <body> ist, stellen Browser es als contentinfo-ARIA-Landmark bereit. Screenreader-Nutzer können direkt mit einem Landmark-Shortcut dorthin springen, und assistive Technologien geben „Inhaltsinformationen" an, damit der Nutzer weiß, in welchen Bereich er gelangt ist. Ein <div> vermittelt nichts davon.
  • SEO und maschinelle Lesbarkeit. Suchmaschinen und Lesemodus-Tools nutzen semantische Bereiche, um die Seitenstruktur zu verstehen. Ein <footer> kennzeichnet klar ergänzende, seiten- oder abschnittsbezogene Metadaten.
  • Dokumentgliederung und Wartbarkeit. Semantische Tags machen das Markup selbstbeschreibend, sodass der nächste Entwickler (oder man selbst, Monate später) die Struktur auf einen Blick erkennen kann.

Verwenden Sie <footer>, wenn der Inhalt tatsächlich Fußzeilenmaterial ist. Nutzen Sie <div> nur für generisches, bedeutungsfreies Gruppieren.

Das contentinfo-Landmark

Die ARIA-Rolle, der ein <footer> zugeordnet wird, hängt davon ab, wo es sich befindet:

  • Ein <footer>, das ein direktes Kindelement von <body> ist, wird zum contentinfo-Landmark — der Fußzeile der gesamten Seite. Es sollte nur eine solche seitenweite Fußzeile geben.
  • Ein <footer>, das innerhalb von <article>, <section>, <aside>, <nav> oder <main> verschachtelt ist, ist kein Landmark — es hat keine contentinfo-Rolle. Es markiert lediglich die Fußzeile dieses Inhaltsbereichs, und davon können beliebig viele vorhanden sein.

Aus diesem Grund kann man jedem Artikel auf einer Seite sicher eine Fußzeile hinzufügen, ohne assistive Technologien zu verwirren: Nur die übergeordnete ist das contentinfo der Seite.

Syntax

Der <footer>-Tag wird als Paar verwendet. Der Inhalt wird zwischen dem öffnenden (<footer>) und dem schließenden (</footer>) Tag geschrieben.

Die nachfolgende Fußzeile ist ein direktes Kindelement von <body> und fungiert daher als contentinfo-Landmark der Seite.

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 »

Fußzeilen in <article>-Elementen und eine seitenweite Fußzeile zusammen

Eine Seite kann mehrere <footer>-Elemente enthalten. Ein gängiges Muster ist eine Fußzeile pro <article> (für Autor, Datum oder Tags des Artikels) plus eine einzelne seitenweite Fußzeile am Ende. Die Artikel-Fußzeilen sind keine Landmarks; nur die auf <body>-Ebene ist contentinfo.

<!DOCTYPE html>
<html>
  <body>
    <main>
      <article>
        <h2>First post</h2>
        <p>Some article content...</p>
        <footer>
          <p>Posted by Jane Doe on 2026-06-18 · Filed under HTML</p>
        </footer>
      </article>

      <article>
        <h2>Second post</h2>
        <p>More article content...</p>
        <footer>
          <p>Posted by John Smith on 2026-06-17 · Filed under CSS</p>
        </footer>
      </article>
    </main>

    <!-- Page-level footer: this one is the contentinfo landmark -->
    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>

Siehe auch die verwandten Gliederungselemente: <header>, <main>, <section> und <article>.

Verschachtelungseinschränkung

Ein <footer> darf kein weiteres <footer> oder einen <header> als Nachfahren enthalten. Das folgende Markup ist ungültig:

<!-- Invalid: a footer nested inside a footer -->
<footer>
  <p>Site footer</p>
  <footer>
    <p>This nested footer is not allowed.</p>
  </footer>
</footer>

Wenn eine Fußzeile für einen Unterabschnitt benötigt wird, sollte dieser Abschnitt ein eigenes Gliederungselement (z. B. <article> oder <section>) erhalten, und die Fußzeile wird darin platziert.

Attribute

Der <footer>-Tag unterstützt die globalen Attribute und Ereignisattribute.

<footer> hat keine besonderen Standardstile — es ist lediglich ein Block-Element — und wird daher wie jedes andere Boxelement gestaltet. Ein häufig verwendetes Aussehen ist eine dunkle, zentrierte Leiste:

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

Übungen

Übung
Wann wird ein HTML-footer-Element zum contentinfo-ARIA-Landmark?
Wann wird ein HTML-footer-Element zum contentinfo-ARIA-Landmark?
Was this page helpful?