<footer>

Das footer-Element markiert den abschließenden Bereich einer Seite oder eines Abschnitts. Es enthält typischerweise Copyright-Hinweise, Kontaktdaten, rechtliche Links, Social-Media-Verweise oder Informationen zum Autor. Ein footer gehört semantisch zu seinem übergeordneten Element und hilft Screenreadern, die Struktur deiner Seite zu verstehen.

Steckbrief <footer>

Kategorie: Semantik
Art: Block
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 05.02.2026

Grundlagen

Das footer-Element ist ein semantisches Element für Fußbereiche. Du kannst mehrere footer-Elemente auf einer Seite verwenden, zum Beispiel einen Seiten-Footer am Ende der Seite und zusätzliche footer-Elemente in Artikeln oder Sections.

Der Browser weist dem obersten footer-Element automatisch die ARIA-Rolle contentinfo zu, was ihn als Hauptfußbereich der Seite kennzeichnet. Footer innerhalb von <article> oder <section> erhalten diese Rolle nicht, sondern werden als lokale Fußbereiche behandelt.

Ein footer muss nicht zwingend am Ende stehen, sollte aber logisch den Abschluss seines übergeordneten Elements bilden. Du kannst darin alles platzieren, was als Abschlussinformation sinnvoll ist: von Copyright-Hinweisen über Navigationslinks bis hin zu Autoreninfos.

Syntax

index.html

Grundsyntax

<footer>
  <p>© 2026 Meine Website</p>
</footer>

Beispiele

3 Beispiele

index.html

Seiten-Footer

<footer>
  <nav>
    <a href="#impressum">Impressum</a>
    <a href="#datenschutz">Datenschutz</a>
    <a href="#kontakt">Kontakt</a>
  </nav>
  <p>© 2026 Meine Website. Alle Rechte vorbehalten.</p>
</footer>

index.html

Artikel-Footer

<article>
  <header>
    <h1>HTML Grundlagen</h1>
  </header>
  <p>Das ist der Artikelinhalt...</p>
  <footer>
    <p><strong>Verfasst von:</strong> Max Mustermann</p>
    <p>Veröffentlicht am: 3. Februar 2026</p>
  </footer>
</article>

index.html

Card-Footer

<div style="border: 1px solid #ddd; border-radius: 8px; max-width: 300px; overflow: hidden;">
  <div style="padding: 20px;">
    <h2>Produktname</h2>
    <p>Kurze Produktbeschreibung hier.</p>
  </div>
  <footer style="background: #f5f5f5; padding: 15px; border-top: 1px solid #ddd;">
    <button>Kaufen</button>
    <button>Details</button>
  </footer>
</div>

Barrierefreiheit

Der oberste footer auf einer Seite erhält automatisch die ARIA-Rolle contentinfo, was ihn als Landmark-Region kennzeichnet. Screenreader können direkt zu dieser Region springen und kündigen sie mit “Fußbereich” oder “Footer” an.

Footer innerhalb von <article> oder <section> werden nicht als Landmarks behandelt, sondern als lokale Fußbereiche. Das hilft Nutzern von Screenreadern, zwischen dem Haupt-Footer und lokalen Footern zu unterscheiden.

Achte darauf, dass wichtige Links im footer auch per Tastatur erreichbar sind. Wenn du Social-Media-Icons verwendest, gib ihnen aussagekräftige alt-Texte oder aria-labels.

Häufige Fehler

3 Fehler

01 Footer nur am Seitenende verwenden

Viele denken, ein footer gehört ausschließlich ans Ende der gesamten Seite. Dabei kannst du footer-Elemente auch in Artikeln, Sections oder Cards nutzen, um lokale Abschlussbereiche zu markieren. Ein Artikel mit Autoreninfo am Ende braucht seinen eigenen footer.

02 Footer in Header oder Footer verschachteln

Ein footer sollte nicht in einem anderen footer oder in einem header verschachtelt werden. Diese Verschachtelung ergibt semantisch keinen Sinn und verwirrt Screenreader. Halte deine Strukturen flach und logisch.

03 Wichtige Navigation nur im Footer

Platziere kritische Navigationselemente nicht ausschließlich im Footer. Nutzer erwarten Hauptnavigation im Header. Der Footer eignet sich für sekundäre Links wie Impressum, Datenschutz oder Social Media.

Browser-Kompatibilität

5 von 5

Das footer-Element wird von allen modernen Browsern vollständig unterstützt:

Das footer-Element wird von allen modernen Browsern vollständig unterstützt. Ältere Browser wie IE 8 behandeln es als generisches Element.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Das footer-Element wird in E-Mail-Clients nur teilweise unterstützt. Viele Clients ignorieren semantische HTML5-Elemente. Verwende stattdessen table- oder div-basierte Layouts mit Inline-Styles.

Apple Mail

Teilweise

Wird als Block-Element gerendert, semantische Bedeutung geht verloren.
Gmail

Keine

Semantische HTML5-Elemente werden ignoriert oder entfernt.
Outlook

Keine

Desktop-Versionen (2016/2019) entfernen semantische Elemente.
Thunderbird

Teilweise

Wird angezeigt, aber ohne semantische Rolle.
Yahoo Mail

Keine

Semantische Elemente werden nicht unterstützt.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<footer>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter