Ausführbare HTML-Docs: HTML Footer

Q: Wie schreibe ich das Copyright-Zeichen in HTML?

Mit der Entity ©, die © anzeigt. Du kannst das Zeichen auch direkt tippen, wenn die Seite verwendet. Wenn du die Zeile in setzt, kennzeichnest du sie als Kleingedrucktes.

Q: Darf eine Seite mehr als einen Footer haben?

Ja. Jedes oder kann einen eigenen Footer für Angaben zum Autor oder Tags haben. Nur ein Footer, der nicht in article, aside, main, nav oder section steht, ist für Screenreader die Landmark contentinfo der Seite.

Setz den abschließenden Inhalt deiner Seite in ein <footer>-Element, meistens das Letzte in <body>. Wie <header> hat es kein Standardaussehen; CSS macht daraus eine Fußleiste:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© gibt das Zeichen © aus. <small> kennzeichnet die Copyright-Zeile als Kleingedrucktes; das ist in HTML seine Bedeutung, nicht nur eine kleinere Schrift. Die Linklisten sind echte <ul>-Listen, die meisten Screenreader sagen also an, wie viele Links jede Spalte hat.

Auf einer Seite mit wenig Inhalt sitzt der Footer direkt unter diesem Inhalt, mit leerem Platz darunter. Die Lösung ist eine Flex-Spalte: Der Container ist mindestens so hoch wie das Fenster, und der Hauptbereich nimmt die ganze übrige Höhe ein. Der graue Kasten unten steht für ein Browserfenster:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

Entferne flex: 1 von main, und der Footer springt unter den Absatz hoch. Auf einer echten Seite setzt du dieselben Regeln an <body>, mit min-height: 100vh (und margin: 0) statt einer festen Höhe. Dann sitzt der Footer auf kurzen Seiten ganz unten und auf langen nach dem Inhalt.

Ein <footer> schließt seinen nächstgelegenen Artikel oder Abschnitt ab, ein Blogbeitrag oder ein Kommentar kann also einen eigenen haben, mit Autor, Datum oder Tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

Screenreader behandeln nur den Footer auf Seitenebene als Landmark contentinfo. Ein Footer in einem Artikel ist eine gewöhnliche Gruppe und konkurriert nicht mit dem Footer der Website.

Kontaktdaten mit address

Für Kontaktinformationen zur Seite oder ihrem Betreiber nimmst du <address> im Footer. Es ist nur für Kontaktdaten gedacht (nicht für jede Postadresse in deinem Inhalt), und Browser zeigen es standardmäßig kursiv an:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

Der Zeilenumbruch in der Adresse ist einer der guten Einsätze für <br>. Mehr zu E-Mail-Links findest du auf der Seite zum mailto-Link.

Ein Footer kann Links, Listen, Formulare (eine Newsletter-Anmeldung), Bilder und ein <nav> enthalten. Er darf keinen <header>, keinen weiteren <footer> und kein <main> enthalten. Ein zweites Menü im Footer kann ein <nav> mit einem Label sein, das es vom Hauptmenü unterscheidet:

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Häufige Fehler

<footer> außerhalb von <body> setzen. Alles Sichtbare kommt in <body>, auch der Footer.
position: fixed verwenden, um ihn unten zu halten. Ein fixierter Footer verdeckt auf kleinen Bildschirmen Inhalt und braucht überall Innenabstand. Nimm das Muster mit der Flex-Spalte.
<address> für jede Adresse verwenden. Es ist für die Kontaktdaten des Autors der Seite oder des Artikels. Eine Ladenadresse in einer Liste von Standorten ist ein normales <p>.
Linkspalten aus <br>-Tags bauen. Nimm <ul>-Listen, damit die Struktur angesagt wird.
Das letzte Jahr fest eintragen. Aktualisiere das Copyright-Jahr in deinem Template oder gib es vom Server oder beim Build aus.

Häufig gestellte Fragen

Was ist das footer-Tag in HTML?

<footer> ist ein semantisches Element für den abschließenden Inhalt einer Seite oder eines Abschnitts: Copyright, Kontaktdaten, verwandte Links oder Infos zum Autor. Es ist ein Block ohne Standardstyling.

Was gehört in den Footer einer Website?

Typische Footer enthalten den Copyright-Hinweis, Links zu rechtlichen Seiten wie Datenschutz und AGB, Kontaktdaten, Social-Media-Links und eine kurze Sitemap. Behalte die Hauptnavigation trotzdem in <nav> weiter oben, denn nicht jeder Besucher scrollt bis ans Ende.

Wie halte ich den Footer unten auf der Seite?

Mach den body zu einer Flex-Spalte, die mindestens so hoch ist wie das Fenster (display: flex; flex-direction: column; min-height: 100vh;), und gib <main> flex: 1. Der Hauptbereich wächst dann in den freien Platz und schiebt den Footer auf kurzen Seiten nach unten.

Wie schreibe ich das Copyright-Zeichen in HTML?

Mit der Entity ©, die © anzeigt. Du kannst das Zeichen auch direkt tippen, wenn die Seite <meta charset="utf-8"> verwendet. Wenn du die Zeile in <small> setzt, kennzeichnest du sie als Kleingedrucktes.

Darf eine Seite mehr als einen Footer haben?

Ja. Jedes <article> oder <section> kann einen eigenen Footer für Angaben zum Autor oder Tags haben. Nur ein Footer, der nicht in article, aside, main, nav oder section steht, ist für Screenreader die Landmark contentinfo der Seite.

Verwandte Konzepte