# HTML Footer Tag

Der HTML Footer bildet den Abschluss einer Webseite bzw. eines Beitrags. Je nach Bedarf kann eine solche HTML-Fußzeile Kontaktdaten, Informationen zum Datenschutz, weiterführende Links oder Ähnliches beinhalten.

## Was ist das HTML-`<footer>`-Tag?

Das HTML-`<footer>`-Tag wird verwendet, um eine [Fußzeile](https://www.ionos.at/digitalguide/websites/webseiten-erstellen/was-ist-ein-footer/) für den Abschluss einer [HTML](https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-html/)-Seite zu erstellen. Im Footer erhalten Besucherinnen und Besucher in der Regel **Informationen zu Datenschutz und Impressum, Kontakt, Copyright oder Öffnungszeiten**, falls es sich um die Website für ein Geschäft, ein Restaurant oder eine Praxis handelt. Auch eine **Sitemap, nützliche Links oder ein Link zum Anfang der Seite** werden hier häufig eingefügt. Es gibt auch HTML Footer, die lediglich als Abschluss eines Beitrags eingerichtet werden und an dieser Stelle wichtige Informationen zum Autor oder der Autorin sowie weiterführende Links abbilden.

Das HTML-`<footer>`-Tag unterstützt alle Event-Attribute sowie alle globalen [HTML-Attribute](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-attribute/). In einem HTML-Dokument können prinzipiell auch **mehrere Footer** hinterlegt werden, sofern diese eine klare Hierarchie haben und ihre semantische Bedeutung für User klar zu erkennen ist. Das [HTML-Tag](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-tags/) wird von allen gängigen Browsern unterstützt und ist auch für die [Barrierefreiheit einer Website](https://www.ionos.at/digitalguide/websites/web-entwicklung/barrierefreie-website/) von großer Bedeutung.

## Die Syntax des HTML Footers

Die grundsätzliche Syntax einer HTML-Fußzeile ist schnell erklärt. Sie wird durch ein einleitendes HTML-`<footer>`-Tag initiiert und durch ein schließendes Tag beendet. Dazwischen können theoretisch verschiedene Inhalte stehen, wobei es in jedem Fall sinnvoll ist, das Design und die Struktur des Footers vom Rest der Website abzuheben. Die Syntax sieht wie folgt aus:

```html
<footer>Gewünschter Inhalt der Fußzeile</footer>
```

Typische HTML-Elemente, die innerhalb eines HTML Footers zum Einsatz kommen, sind `<p>` für Absätze, `<a>` für Links, `<ul>` und `<li>` für [HTML-Listen](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-lists/), `<address>` für Kontaktinformationen und `<nav>` für Navigationslinks.

## Beispiele für HTML Footer

Im folgenden Beispiel zeigen wir Ihnen eine einfache HTML-Fußzeile, in der lediglich der Autor Peter Schulz und seine E-Mail-Adresse hinterlegt werden. Dies sieht folgendermaßen aus:

```html

<html>
<body>
<h1>Beispiel für eine HTML Fußzeile</h1>
<footer>
<p>Autor: Peter Schulz<br>
<a href="mailto:pschulz@beispiel.com">pschulz@beispiel.com</a></p>
</footer>
<div class="hash d-none" hidden>hash_ace4618598f3cb9a81d69e9441e0a1f73b8e293a</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Möchten Sie mehrere HTML-`<footer>`-Tags in einem Dokument unterbringen, ist dies ebenfalls möglich. Das Element kann unter anderem auch innerhalb von `<section>` oder `<article>` platziert werden. Im folgenden Beispiel sehen Sie, wie mehrere Footer innerhalb eines Dokuments eingesetzt werden:

```html

<html>
<body>
<main>
<section>
<h1>Über uns</h1>
<p>Erfahren Sie mehr über uns und unsere Arbeit...</p>
<footer>
<p>Copyright 2024 Beispielfirma. All Rights Reserved.</p>
<p>Schreiben Sie uns gern: <a href="mailto:info@beispiel.com">info@beispiel.com</a></p>
</footer>
</section>
<section>
<h1>Rechtliches</h1>
<p>Erfahren Sie mehr über unsere Allgemeinen Geschäftsbedingungen...</p>
<footer>
<p>Ein Angebot von <a href="https://beispiel.com">Beispielfirma</a>.</p>
</footer>
</section>
</main>
<footer>
<p>Hier erreichen Sie uns:</p>
<ul>
<li><a href="https://www.facebook.com/beispielfirma">Facebook</a></li>
<li><a href="https://x.com/programiz">X</a></li>
<li><a href="https://www.instagram.com/_beispielfirma/">Instagram</a></li>
</ul>
</footer>
<div class="hash d-none" hidden>hash_ace4618598f3cb9a81d69e9441e0a1f73b8e293a</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Das Resultat sieht in etwa folgendermaßen aus:

[![Bild: Beispiel für mehrere HTML-Footer](https://www.ionos.at/digitalguide/fileadmin/_processed_/b/2/csm_html-footer-beispiel_ce667a4277.webp "Beispiel für mehrere HTML-Footer")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-footer-beispiel.png) Im Beispiel ist der Footer zweigeteilt in die Rubriken „Über uns“ und „Rechtliches“ ## Wie fügt sich die HTML-Fußleiste in die Struktur eines HTML-Dokuments ein?

Der HTML Footer wird in der Regel am unteren Ende platziert. Er befindet sich in einem HTML-Dokument somit unter dem Bereich `<head>`, aber innerhalb von [body](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-body/), der den **sichtbaren Teil der Website** umfasst.


This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/html-footer/](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-footer/) for AI/LLM consumption.