Footer erstellen: Das solide Ende der Seite

vom 02.01.2014 von Oliver Misch

Der Footer ist der unaufgeregteste Teil einer Website und trotzdem einer mit festen Aufgaben: Er beherbergt die Pflichtlinks, sagt wem die Seite gehört und signalisiert "hier ist Schluss". Bauen wir einen ordentlichen.

Schritt 1: Struktur

HTML-Code

<footer>
    <nav aria-label="Fußzeilen-Links">
        <a href="impressum.html">Impressum</a> ·
        <a href="datenschutz.html">Datenschutz</a> ·
        <a href="kontakt.html">Kontakt</a>
    </nav>
    <p>&copy; 2026 Kim Beispiel. Handgetippt.</p>
</footer>

Das footer-Element macht die Rolle des Bereichs maschinenlesbar. Bei einer Handvoll Links reicht auch eine schlichte Zeile ohne nav, ab einem richtigen Linkblock ist die Auszeichnung aber sauber. Und falls deine Seite öffentlich in Deutschland läuft: Impressum und Datenschutzerklärung sind keine Deko sondern Pflicht, der Footer ist ihr angestammter Platzz.

Schritt 2: Gestalten

CSS

footer {
    margin-top: 48px;
    padding: 24px 16px;
    border-top: 3px solid #008080;
    background: #F4F4F4;
    font-size: 0.9em;
    color: #444;
    text-align: center;
}
footer a { color: #008080; }

Das Rezept: deutlicher Abstand nach oben, eine Trennlinie als Kante, gedeckte Farben und etwas kleinere Schrift. Der Footer darf zurücktreten, er ist Servicebereich, keine Bühnne.

Schritt 3: Der Klassiker: Footer bei wenig Inhalt

Bei kurzen Seiten schwebt der Footer sonst mitten im Fenster statt unten zu sitzen. Die moderne Lösung ist ein Flex-Trick am Grundgerüst:

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;    /* main schluckt den freien Platz */
}

Der body wird mindestens fensterhoch, Flexbox stapelt die Bereiche senkrecht, und main dehnt sich aus bis der Footer unten anliegt. Drei Regeln, jahrzehntealtes Problem gelöst.

Was nicht in den Footer gehört

Wichtiger Inhalt. Wer zentrale Infos "unten noch reinquetscht", versteckt sie. Und die 90er-Sitte, den Footer mit Besucherzählern und Badges vollzuhängen, dokumentieren wir liebevoll im Retro-Web, praktizieren sie aber, äh, na gut, teilweise selbst. Als Stilmittel. Ausnahmsweisse.

Mehrspaltige Footer für größere Seiten

Wächst die Website, wächst der Footer gern mit: Linkgruppen für Themen, Rechtliches und Kontakt nebeneinander. Das Rezept ist das Kachelraster von der Grid-Seite:

footer .gruppen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    text-align: left;
}

Jede Linkgruppe wird ein Block mit eigener kleiner Überschrift, das Raster bricht auf dem Handy automatisch um. Wichtig bei mehreren Gruppen: Überschriften als echte Überschriften-Elemente auszeichnen (die Ebene folgt der Seitengliederung), dann können Screenreader-Nutzer die Gruppen anspringn.

Der Copyright-Vermerk, kurz eingeordnet

Das © mit Jahreszahl ist Tradition, aber kein Zauberspruch: Urheberrechtsschutz entsteht in Deutschland automatisch mit dem Werk, der Vermerk ist nur ein Hinweis. Schaden tut er nicht, und er beantwortet nebenbei die Frage "ist die Seite noch gepflegt?", weshalb eine veraltete Jahreszahl das schlechteste Signal überhaupt ist. Entweder aktuell halten oder eine Spanne schreiben ("2002 bis 2026"), die ehrlich das Alter der Seite zeigt, für ein Wiki mit Geschichte wie dieses sogar die schönere Variantte.

Weiter im Fahrplan: Responsive Webseite · Verwandt: Semantisches HTML