Der Footer ist ein grundlegendes HTML-Element, das den Fußbereich einer Webseite definiert und wichtige Informationen wie Kontaktdaten, rechtliche Hinweise, Navigation und Copyright-Informationen enthält. Als semantisches HTML5-Element spielt der Footer eine zentrale Rolle für die Benutzerfreundlichkeit, Suchmaschinenoptimierung und die strukturelle Integrität moderner Webseiten. In diesem umfassenden Glossar-Artikel erfahren Sie alles Wissenswerte über die korrekte Implementierung, Best Practices und die vielfältigen Einsatzmöglichkeiten des Footer-Elements.
Was ist ein Footer in HTML?
Das <footer>-Element ist ein semantisches HTML5-Element, das seit 2014 im offiziellen HTML5-Standard verankert ist. Es definiert den Fußbereich einer Webseite, eines Artikels oder eines Abschnitts und enthält typischerweise Informationen über den Autor, Copyright-Hinweise, Kontaktdaten, Sitemap-Links, rechtliche Hinweise und Social-Media-Verknüpfungen. Im Gegensatz zu einem einfachen <div>-Element mit einer Footer-Klasse bietet das semantische <footer>-Element klare Vorteile für Screenreader, Suchmaschinen und die Codestruktur.
Semantische Bedeutung des Footer-Elements
Das Footer-Element ist mehr als nur ein visueller Abschluss einer Webseite. Es kommuniziert Suchmaschinen und assistiven Technologien, dass hier zusammenfassende oder ergänzende Informationen zu finden sind. Laut einer Studie von WebAIM aus 2024 nutzen 87% der professionellen Webseiten das semantische Footer-Element korrekt, was die Zugänglichkeit für Menschen mit Behinderungen erheblich verbessert.
Grundlegende HTML-Syntax des Footer-Elements
Die Implementierung eines Footer-Elements folgt einer klaren und einfachen Syntax. Das Element kann sowohl auf der obersten Ebene einer Webseite als auch innerhalb von Artikeln oder Sections verwendet werden.
<footer>
<p>© 2024 Ihr Unternehmen. Alle Rechte vorbehalten.</p>
<nav>
<a href="/impressum">Impressum</a>
<a href="/datenschutz">Datenschutz</a>
<a href="/kontakt">Kontakt</a>
</nav>
</footer>
Erweiterte Footer-Struktur
Ein moderner Footer enthält oft mehrere Bereiche mit unterschiedlichen Informationen. Hier ein Beispiel einer komplexeren Footer-Struktur:
<footer class="site-footer">
<div class="footer-content">
<div class="footer-section">
<h3>Über uns</h3>
<p>Kurze Unternehmensbeschreibung</p>
</div>
<div class="footer-section">
<h3>Kontakt</h3>
<address>
E-Mail: info@beispiel.de
Tel: +49 123 456789
</address>
</div>
<div class="footer-section">
<h3>Social Media</h3>
<a href="#" aria-label="Facebook">Facebook</a>
<a href="#" aria-label="Twitter">Twitter</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Unternehmen. Alle Rechte vorbehalten.</p>
</div>
</footer>
Typische Inhalte eines Website-Footers
📋 Rechtliche Informationen
Impressum, Datenschutzerklärung, AGB, Cookie-Richtlinien und Haftungsausschluss gehören zu den rechtlich erforderlichen Elementen, besonders in der EU durch die DSGVO.
📞 Kontaktinformationen
Adresse, Telefonnummer, E-Mail-Adresse und Öffnungszeiten ermöglichen Besuchern eine schnelle Kontaktaufnahme ohne lange Suche.
🗺️ Navigation
Sitemap-Links, Hauptnavigation oder Quicklinks zu wichtigen Seiten verbessern die Benutzerfreundlichkeit und SEO-Performance.
🔗 Social Media
Verknüpfungen zu sozialen Netzwerken wie Facebook, Instagram, LinkedIn und Twitter fördern die Online-Präsenz und Community-Bildung.
📰 Newsletter
Anmeldeformulare für Newsletter oder Updates helfen beim Aufbau einer E-Mail-Marketing-Liste und Kundenbindung.
© Copyright
Copyright-Hinweise mit Jahreszahl und Unternehmensname schützen geistiges Eigentum und signalisieren Professionalität.
SEO-Relevanz des Footer-Elements
Der Footer spielt eine wichtige Rolle für die Suchmaschinenoptimierung, auch wenn seine Bedeutung oft unterschätzt wird. Suchmaschinen wie Google analysieren die Footer-Struktur, um die Gesamtarchitektur einer Website zu verstehen.
Footer-Links und interne Verlinkung
Footer-Links sind wertvoll für die interne Verlinkungsstruktur. Sie helfen Suchmaschinen-Crawlern, alle wichtigen Seiten zu entdecken und zu indexieren. Allerdings bewerten Suchmaschinen seit dem Google Penguin Update 2012 Footer-Links weniger stark als Content-Links.
Best Practices für Footer-Links:
- Begrenzen Sie die Anzahl auf 20-30 Links, um Link-Dilution zu vermeiden
- Verwenden Sie beschreibende Ankertexte statt generischer Begriffe
- Gruppieren Sie Links logisch nach Kategorien
- Vermeiden Sie Keyword-Stuffing in Footer-Links
- Stellen Sie sicher, dass alle Links funktionieren (keine 404-Fehler)
- Nutzen Sie rel=“nofollow“ für externe Links, wenn angebracht
- Implementieren Sie eine Mobile-First-Strategie für responsive Footer
Barrierefreiheit und Accessibility
Die Zugänglichkeit des Footers ist entscheidend für Menschen mit Behinderungen. Nach den WCAG 2.1 Richtlinien (Web Content Accessibility Guidelines) müssen Footer-Elemente bestimmte Kriterien erfüllen, um als barrierefrei zu gelten.
ARIA-Attribute für Footer
<footer role="contentinfo" aria-label="Seitenfußbereich">
<nav aria-label="Footer-Navigation">
<ul>
<li><a href="/impressum">Impressum</a></li>
<li><a href="/datenschutz">Datenschutz</a></li>
</ul>
</nav>
</footer>
Wichtige Accessibility-Anforderungen:
Das role="contentinfo"-Attribut kennzeichnet den Haupt-Footer der Seite. Screenreader nutzen diese Information, um Nutzern die Navigation zu erleichtern. Das aria-label-Attribut bietet eine zusätzliche Beschreibung, die besonders bei mehreren Footer-Elementen auf einer Seite hilfreich ist. Stellen Sie sicher, dass alle interaktiven Elemente per Tastatur erreichbar sind (Tab-Navigation) und einen Fokus-Indikator besitzen.
Farbkontraste und Lesbarkeit
Footer-Bereiche haben oft dunkle Hintergrundfarben. Für optimale Lesbarkeit muss der Farbkontrast zwischen Text und Hintergrund mindestens 4.5:1 für normalen Text und 3:1 für großen Text betragen (WCAG AA-Standard).
Responsive Design für Footer-Elemente
Moderne Webseiten müssen auf allen Geräten funktionieren. Der Footer ist besonders herausfordernd, da er oft viele Informationen auf kleinem Raum darstellen muss.
Mobile-First Footer-Strategie
<style>
.site-footer {
padding: 40px 20px;
background: #1a202c;
color: #fff;
}
.footer-content {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
@media (min-width: 768px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.footer-content {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
⚠️ Häufige Mobile-Footer-Fehler
Viele Entwickler machen den Fehler, zu viele Informationen in den mobilen Footer zu packen. Dies führt zu endlosem Scrollen und schlechter Nutzererfahrung. Verwenden Sie Akkordeon-Menüs oder ausklappbare Bereiche für umfangreiche Footer-Inhalte auf mobilen Geräten. Laut Google PageSpeed Insights sollte der Footer auf mobilen Geräten maximal 50% der Viewport-Höhe einnehmen.
Footer in verschiedenen Kontexten
Das Footer-Element kann nicht nur für die Hauptwebseite, sondern auch für einzelne Artikel, Sections oder Aside-Elemente verwendet werden. Diese Flexibilität macht es zu einem vielseitigen Werkzeug.
Artikel-Footer
<article>
<header>
<h2>Artikelüberschrift</h2>
<p>Von Max Mustermann, 15. Januar 2024</p>
</header>
<p>Artikelinhalt...</p>
<footer>
<p>Tags: HTML, CSS, Webentwicklung</p>
<p>Zuletzt aktualisiert: 20. Januar 2024</p>
<div class="author-bio">
<h4>Über den Autor</h4>
<p>Max Mustermann ist Webentwickler...</p>
</div>
</footer>
</article>
Section-Footer
Innerhalb von Section-Elementen kann ein Footer zusätzliche Informationen oder Metadaten zum jeweiligen Abschnitt enthalten:
<section>
<h2>Produktkategorie</h2>
<p>Beschreibung der Kategorie...</p>
<footer>
<p>Verfügbare Produkte: 42</p>
<p>Preisbereich: 10€ - 99€</p>
</footer>
</section>
Footer-Performance und Ladezeiten
Die Performance des Footers wird oft vernachlässigt, kann aber erheblichen Einfluss auf die Gesamtladezeit haben. Besonders bei Footern mit vielen externen Ressourcen wie Social-Media-Widgets oder eingebetteten Karten ist Vorsicht geboten.
⚡ Lazy Loading
Laden Sie Footer-Bilder und -Skripte verzögert, da sie sich unterhalb der Falz befinden. Verwenden Sie das loading=“lazy“-Attribut für Bilder.
🗜️ Code-Minimierung
Minimieren Sie CSS und JavaScript im Footer. Entfernen Sie ungenutzten Code und kombinieren Sie Dateien, um HTTP-Requests zu reduzieren.
📦 Ressourcen-Optimierung
Komprimieren Sie Bilder und verwenden Sie moderne Formate wie WebP. SVG-Icons sind oft besser als Icon-Fonts für Social-Media-Symbole.
🔌 Externe Dienste
Begrenzen Sie externe Widgets und verwenden Sie async/defer für Skripte. Jedes externe Widget erhöht die Ladezeit um durchschnittlich 0.5-2 Sekunden.
Footer-Styling und Design-Trends 2024
Moderne Footer-Designs haben sich von einfachen schwarzen Balken zu visuell ansprechenden, funktionalen Bereichen entwickelt. Hier sind die aktuellen Trends für 2024:
Minimalistische Footer
Der Trend geht zu aufgeräumten, fokussierten Footern mit nur den wichtigsten Informationen. Unternehmen wie Apple und Google setzen auf minimale Footer mit maximal 10-15 Links.
Mega-Footer
Große E-Commerce-Seiten wie Amazon nutzen umfangreiche Footer mit mehreren Spalten, Kategorien und hunderten von Links. Diese Mega-Footer dienen als zweite Hauptnavigation.
| Footer-Typ | Vorteile | Nachteile | Beste Verwendung |
|---|---|---|---|
| Minimalistisch | Schnelle Ladezeit, klare Fokussierung, moderne Optik | Wenig Platz für Informationen, begrenzte Navigation | Portfolios, Landing Pages, kleine Websites |
| Standard | Ausgewogenes Verhältnis, bewährte Struktur | Kann generisch wirken, mittlere Komplexität | Unternehmenswebsites, Blogs, kleine Online-Shops |
| Mega-Footer | Umfassende Navigation, SEO-Vorteile, viel Information | Lange Ladezeiten, kann überwältigend wirken | E-Commerce, große Portale, Content-Websites |
| Sticky Footer | Immer sichtbar, gute Conversion-Möglichkeiten | Nimmt Bildschirmplatz weg, kann störend sein | Web-Apps, SaaS-Produkte, mobile Anwendungen |
Moderne Footer-Gestaltungselemente
Aktuelle Design-Trends:
- Farbverläufe: Sanfte Gradienten statt einfarbiger Hintergründe schaffen visuelle Tiefe
- Glasmorphismus: Halbtransparente Footer mit Blur-Effekten für moderne Optik
- Micro-Interactions: Hover-Effekte und Animationen für besseres Nutzerengagement
- Dark Mode: Alternative Farbschemata für bessere Lesbarkeit bei Nacht
- Illustrationen: Individuelle Grafiken statt Stock-Fotos für Markenidentität
- Newsletter-Integration: Auffällige Anmeldeformulare mit klaren Call-to-Actions
- Wellenformen: Organische Formen als Übergang zwischen Content und Footer
Rechtliche Anforderungen an Footer
In Deutschland und der EU bestehen strenge rechtliche Anforderungen an Website-Footer, besonders durch das Telemediengesetz (TMG) und die Datenschutz-Grundverordnung (DSGVO).
Pflichtangaben im Footer
🔒 DSGVO-konforme Footer-Elemente
Jede kommerzielle Website in der EU muss bestimmte Informationen im Footer bereitstellen: Ein vollständiges Impressum mit Anbieterkennzeichnung, eine ausführliche Datenschutzerklärung, die Cookie-Verwendung beschreibt, sowie gegebenenfalls AGB und Widerrufsbelehrung. Das Fehlen dieser Angaben kann zu Abmahnungen mit Kosten bis zu 5.000 Euro führen. Die Links müssen von jeder Seite aus mit maximal zwei Klicks erreichbar sein.
Impressumspflicht
Nach § 5 TMG müssen folgende Informationen leicht erkennbar, unmittelbar erreichbar und ständig verfügbar sein:
- Name und Anschrift des Anbieters
- Kontaktmöglichkeiten (E-Mail, Telefon)
- Bei juristischen Personen: Vertretungsberechtigte
- Handelsregister, Vereinsregister oder Genossenschaftsregister
- Umsatzsteuer-Identifikationsnummer
- Bei reglementierten Berufen: Aufsichtsbehörde und Berufsbezeichnung
Footer-Implementierung in WordPress
WordPress bietet verschiedene Möglichkeiten zur Footer-Gestaltung. Die meisten Themes haben vordefinierte Footer-Bereiche, die über das Customizer-Interface oder Widget-Bereiche angepasst werden können.
Footer-Widget-Bereiche
// functions.php
function register_footer_widgets() {
register_sidebar(array(
'name' => 'Footer Spalte 1',
'id' => 'footer-1',
'before_widget' => '<div class="footer-widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
));
}
add_action('widgets_init', 'register_footer_widgets');
Footer-Template in WordPress
<!-- footer.php -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="footer-widgets">
<?php if (is_active_sidebar('footer-1')) : ?>
<div class="footer-column">
<?php dynamic_sidebar('footer-1'); ?>
</div>
<?php endif; ?>
</div>
<div class="site-info">
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Testing und Qualitätssicherung
Ein professioneller Footer muss umfassend getestet werden, um auf allen Geräten und in allen Browsern korrekt zu funktionieren.
Footer-Checkliste
✓ Technische Tests:
- Funktionieren alle Links? (Broken Link Check)
- Ist der Footer auf Smartphones, Tablets und Desktop responsive?
- Werden Farbkontraste eingehalten? (WCAG AA/AAA)
- Ist die Tastaturnavigation möglich?
- Funktioniert der Footer mit deaktivierten Cookies?
- Sind alle Pflichtangaben vorhanden und aktuell?
- Lädt der Footer innerhalb von 2 Sekunden?
- Werden strukturierte Daten korrekt ausgegeben?
- Ist der Footer in allen gängigen Browsern korrekt dargestellt?
Browser-Kompatibilität
Testen Sie den Footer mindestens in folgenden Browsern und Versionen:
Chrome
Version 120+ (Januar 2024), Marktanteil: 63%
Safari
Version 17+ (iOS/macOS), Marktanteil: 20%
Firefox
Version 121+ (Januar 2024), Marktanteil: 3%
Edge
Version 120+ (Chromium), Marktanteil: 5%
Häufige Footer-Fehler vermeiden
Auch erfahrene Entwickler machen manchmal Fehler bei der Footer-Implementierung. Hier sind die häufigsten Probleme und deren Lösungen:
❌ Fehler 1: Zu viele Links
Mehr als 50 Links im Footer können als Spam interpretiert werden und die Nutzererfahrung verschlechtern. Google empfiehlt maximal 30-40 Links pro Footer. Lösung: Priorisieren Sie die wichtigsten Links und verschieben Sie weniger relevante Inhalte auf dedizierte Seiten.
❌ Fehler 2: Fehlende Mobile-Optimierung
Über 60% des Web-Traffics kommt von mobilen Geräten. Ein nicht-responsiver Footer führt zu hohen Absprungraten. Lösung: Implementieren Sie ein Mobile-First-Design mit zusammenklappbaren Bereichen und Touch-freundlichen Schaltflächen (mindestens 44×44 Pixel).
❌ Fehler 3: Veraltete Informationen
Ein Copyright-Hinweis von 2018 signalisiert, dass die Website nicht gepflegt wird. Lösung: Automatisieren Sie die Jahresangabe mit PHP oder JavaScript: ©
Footer-Analytics und Tracking
Die Analyse des Nutzerverhaltens im Footer-Bereich liefert wertvolle Insights für die Optimierung. Tools wie Google Analytics, Hotjar oder Microsoft Clarity bieten spezielle Tracking-Möglichkeiten.
Wichtige Footer-Metriken
Event-Tracking für Footer-Links
// Google Analytics 4 Event-Tracking
document.querySelectorAll('.site-footer a').forEach(link => {
link.addEventListener('click', function() {
gtag('event', 'footer_link_click', {
'link_text': this.textContent,
'link_url': this.href,
'link_position': 'footer'
});
});
});
Zukunft des Footer-Elements
Die Entwicklung von Webtechnologien beeinflusst auch die Footer-Gestaltung. Trends wie Progressive Web Apps (PWA), Voice User Interfaces und KI-gestützte Personalisierung verändern die Anforderungen.
🚀 Emerging Trends 2024-2025:
Personalisierte Footer: KI-basierte Systeme passen Footer-Inhalte an Nutzerverhalten und -präferenzen an. Besucher aus Deutschland sehen andere rechtliche Links als internationale Besucher.
Voice-Optimierung: Mit der Zunahme von Voice-Search müssen Footer-Informationen auch für Sprachassistenten optimiert werden.
Micro-Frontends: Footer als eigenständige, wiederverwendbare Komponente, die über verschiedene Domains hinweg eingebunden werden kann.
Sustainability: Energieeffiziente Footer mit reduzierten Ressourcen als Teil der Green-Web-Bewegung.
Zusammenfassung
Das HTML-Footer-Element ist weit mehr als ein einfacher Seitenabschluss. Es ist ein essentieller Bestandteil moderner Webarchitektur, der SEO, Usability, rechtliche Compliance und Markenidentität vereint. Ein gut gestalteter Footer verbessert die Nutzererfahrung, stärkt das Vertrauen und unterstützt die Conversion-Optimierung.
Die wichtigsten Erkenntnisse: Nutzen Sie semantisches HTML5-Markup, achten Sie auf Accessibility, implementieren Sie responsive Design, erfüllen Sie rechtliche Anforderungen und optimieren Sie kontinuierlich basierend auf Nutzeranalysen. Mit einem durchdachten Footer-Konzept legen Sie den Grundstein für eine professionelle, erfolgreiche Website.
💡 Pro-Tipp für Entwickler
Erstellen Sie eine wiederverwendbare Footer-Komponente mit Variablen für unterschiedliche Kontexte. Dokumentieren Sie alle Footer-Varianten in einem Style Guide und führen Sie regelmäßige Audits durch. Ein gut gepflegter Footer ist ein Zeichen von Professionalität und Qualitätsbewusstsein, das Nutzer und Suchmaschinen gleichermaßen honorieren.
Was ist ein Footer in HTML und wofür wird er verwendet?
Ein Footer ist ein semantisches HTML5-Element, das mit dem
Welche Inhalte gehören in einen professionellen Website-Footer?
Ein professioneller Footer sollte rechtliche Pflichtangaben (Impressum, Datenschutz, AGB), Kontaktinformationen, wichtige Navigationslinks, Social-Media-Verknüpfungen, Newsletter-Anmeldung und Copyright-Hinweise enthalten. In der EU sind nach DSGVO bestimmte Elemente wie Impressum und Datenschutzerklärung verpflichtend. Die optimale Anzahl liegt bei 20-30 Links, um Übersichtlichkeit zu gewährleisten.
Wie wichtig ist der Footer für SEO und Suchmaschinenoptimierung?
Der Footer spielt eine wichtige Rolle für SEO, da er zur internen Verlinkungsstruktur beiträgt und Suchmaschinen-Crawlern hilft, alle wichtigen Seiten zu entdecken. Etwa 87% der Top-Websites nutzen strukturierte Footer mit semantischem HTML. Footer-Links haben allerdings weniger SEO-Gewicht als Content-Links. Wichtig sind beschreibende Ankertexte, logische Gruppierung und die Vermeidung von Keyword-Stuffing.
Was muss bei der Barrierefreiheit des Footers beachtet werden?
Für barrierefreie Footer müssen nach WCAG 2.1 Standards mehrere Kriterien erfüllt werden: Verwendung von role=“contentinfo“ und aria-label Attributen, Tastaturnavigation für alle interaktiven Elemente, Farbkontraste von mindestens 4.5:1 zwischen Text und Hintergrund sowie beschreibende Link-Texte. Screenreader-Nutzer profitieren von semantischem HTML und klarer Strukturierung durch Überschriften.
Wie erstelle ich einen responsiven Footer für mobile Geräte?
Ein responsiver Footer nutzt Mobile-First-Design mit CSS Grid oder Flexbox, die sich an verschiedene Bildschirmgrößen anpassen. Auf mobilen Geräten sollten Footer-Spalten untereinander statt nebeneinander angeordnet werden. Akkordeon-Menüs helfen bei umfangreichen Inhalten. Touch-Elemente benötigen mindestens 44×44 Pixel Größe. Der mobile Footer sollte maximal 50% der Viewport-Höhe einnehmen, um übermäßiges Scrollen zu vermeiden.
Letzte Bearbeitung am Mittwoch, 29. Oktober 2025 – 9:13 Uhr von Alex, Webmaster für Google und Bing SEO.
