Kopf- und Fußbereich: header, footer, nav
Kopf- und Fußbereich: header, footer, nav
~8 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Beginnen wir mit den drei Elementen, die auf fast jeder Webseite der Welt vorkommen: <header>, <nav> und <footer>.
<header>: der Kopfbereich
<header> markiert den einleitenden Bereich einer Seite (oder eines Abschnitts) - typischerweise mit Logo, Hauptüberschrift und manchmal der Navigation:
<header>
<h1>Finns Fußball-Webseite</h1>
</header>Achtung: Verwechsle <header> nicht mit <head>! <head> (aus Kapitel 4) enthält unsichtbare Seiteninformationen wie <title> und steht einmal ganz am Anfang der Datei. <header> ist ein sichtbarer Bereich innerhalb von <body> und kann sogar mehrfach auf einer Seite vorkommen (zum Beispiel einmal für die ganze Seite und einmal für einen einzelnen Artikel).
<nav>: die Navigation
<nav> markiert einen Bereich mit den wichtigsten Links einer Seite - typischerweise das Hauptmenü:
<nav>
<a href="index.html">Start</a>
<a href="spieler.html">Spieler</a>
<a href="kontakt.html">Kontakt</a>
</nav>Tipp: Häufig steht innerhalb von <nav> eine <ul>-Liste mit den Links, weil eine Navigation ja im Grunde eine Liste von Möglichkeiten ist - das machen wir gleich in der Praxis.
<footer>: der Fußbereich
<footer> markiert den abschließenden Bereich einer Seite - typischerweise Copyright-Hinweise, Kontaktinfos, oder ein Impressum:
<footer>
<p>© 2026 Finns Fußball-Webseite</p>
</footer>Alle drei auf Finns Startseite einbauen
Baue jetzt Kopf, Navigation und Fuß um den bestehenden Inhalt von index.html:
<body>
<header>
<h1>Finns Fußball-Webseite</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="spieler.html">Meine Lieblingsspieler</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<!-- Der ganze bisherige Inhalt (Über mich, Hobbys, Verein, ...) bleibt
unverändert hier stehen. -->
<footer>
<p>© 2026 Finns Fußball-Webseite</p>
</footer>
</body>Optisch ändert sich im Browser wieder fast nichts (wie erwartet - das ist ja der Punkt bei semantischem HTML). Aber jetzt hat deine Seite eine klare, maschinenlesbare Struktur: Kopf, Navigation, Inhalt, Fuß.
Tipp: © in <footer> ist ein Beispiel für eine sogenannte "Entity": eine Textfolge, die der Browser in ein Sonderzeichen umwandelt - hier in das Copyright-Zeichen ©. Wir schauen uns das genauer in Block 8 an.