<footer>

Zuletzt aktualisiert am 5. Februar 2026

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.

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

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

Beispiele

Seiten-Footer mit Navigation und Copyright

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

Artikel-Footer mit Autor-Info

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

Card-Footer mit Aktionen

<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

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.

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.

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

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.

Email-Kompatibilität

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.

Verwandte Elemente