html-einfach.de

Semantisches HTML · Grundlagen & Struktur

Struktur-Elemente: header, nav, main & footer

Von Zuletzt geändert am

Vier Elemente bilden das Grundgerüst fast jeder Seite: <header>, <nav>, <main> und <footer>. Sie gliedern ein Dokument in klar benannte Bereiche und schaffen damit die Orientierung, von der Screenreader, Suchmaschinen und nicht zuletzt du selbst beim Lesen des Codes profitieren. Wenn ich ein neues Template beginne, stehen diese vier Elemente als Erstes – noch bevor eine Zeile CSS entsteht.

Das Grundgerüst auf einen Blick

<body>
  <header>
    <a href="/index.html">Logo</a>
    <nav aria-label="Hauptnavigation">…</nav>
  </header>

  <main>
    <h1>Seitentitel</h1>
    …
  </main>

  <footer>
    <p>© 2026 …</p>
  </footer>
</body>

Diese Reihenfolge – einleitender Bereich, Hauptinhalt, abschließender Bereich – entspricht der natürlichen Lesefolge und ist zugleich die Struktur, die assistive Technologien erwarten.

Der <header> enthält einleitende Inhalte: typischerweise Logo, Seitentitel und die Hauptnavigation. Wichtig ist eine Unterscheidung, die oft untergeht: <header> ist nicht auf die Seite als Ganzes beschränkt. Auch ein <article> oder eine <section> darf einen eigenen <header> für Überschrift und Metadaten haben.

<article>
  <header>
    <h2>Beitragstitel</h2>
    <p>Veröffentlicht am <time datetime="2026-06-26">26. Juni 2026</time></p>
  </header>
  <p>…</p>
</article>

Nur der <header>, der direkt im <body> steht (und nicht in <article>, <section> oder <aside>), wird als Seiten-Landmark („banner“) interpretiert.

<nav> kennzeichnet einen Block mit wesentlichen Navigationslinks. Nicht jede Linksammlung braucht ein <nav> – ein paar Links im Fließtext oder im Footer kommen ohne aus. Für die Hauptnavigation, eine Seitenleiste oder Breadcrumbs ist es dagegen genau richtig.

Hat eine Seite mehrere <nav>-Bereiche, solltest du sie unterscheidbar machen. Dafür nutze ich gern aria-label:

<nav aria-label="Hauptnavigation">…</nav>
<nav aria-label="Brotkrümel">…</nav>

So liest ein Screenreader „Hauptnavigation“ bzw. „Brotkrümel“ vor, statt zweimal nur „Navigation“. Innerhalb von <nav> gehören die Links in eine Liste (<ul>) – das vermittelt die Anzahl der Einträge und unterstützt die Tastaturbedienung.

<main>

<main> umschließt den zentralen, einzigartigen Inhalt der Seite. Dazu gehören weder die seitenweite Navigation noch wiederkehrende Footer-Inhalte. Zwei Regeln sind hier entscheidend:

  • Es gibt genau ein sichtbares <main> pro Seite.
  • <main> wird nicht in <article>, <aside>, <header>, <footer> oder <nav> verschachtelt.

Das <main>-Element ist außerdem das natürliche Sprungziel für einen Skip-Link:

<a class="skip-link" href="#main">Zum Inhalt springen</a>
…
<main id="main">…</main>

Der <footer> enthält abschließende Informationen zu seinem nächsten übergeordneten Bereich: Copyright, rechtliche Links, Kontaktangaben, manchmal eine sekundäre Navigation. Wie beim <header> gilt: Ein <footer> direkt im <body> ist die Seiten-Landmark „contentinfo“; ein <footer> innerhalb eines <article> beschreibt nur diesen Beitrag (etwa Autor und Datum).

Ergänzend: <aside>, <section>, <article>

Die vier Grundelemente werden meist von drei weiteren begleitet:

  • <aside> für ergänzende Inhalte mit losem Bezug zum Hauptinhalt (z. B. weiterführende Links, Infokästen).
  • <section> für thematische Abschnitte mit eigener Überschrift.
  • <article> für in sich abgeschlossene, eigenständig sinnvolle Inhalte.

Die Abgrenzung von <article> und <section> ist erfahrungsgemäß die häufigste Stolperstelle – ihr ist die Seite article vs. section gewidmet.

Kleinere Helfer: address, hgroup & Sectioning-Roots

Drei Elemente runden das Bild ab, ohne eine eigene Seite zu brauchen:

  • <address> zeichnet Kontaktinformationen aus – die des Dokuments (oft im <footer>) oder die des nächsten <article>. Es ist nicht für beliebige postalische Adressen im Fließtext gedacht, sondern für „so erreichst du den Verantwortlichen“.
  • <hgroup> bündelt eine Überschrift mit einem unmittelbar zugehörigen Zusatz – etwa eine <h1> mit einem erläuternden Untertitel-Absatz. So bleibt die Überschriften-Hierarchie sauber, weil der Untertitel keine eigene Ebene belegt.
  • Sectioning-Roots wie <blockquote>, <figure>, <details> oder <td> haben eine eigene Gliederung: Überschriften darin zählen nicht zur Outline der umgebenden Seite. Praktisch, damit ein zitierter Block die Dokumentstruktur nicht durcheinanderbringt.

Häufige Fehler

  • Mehrere <main> pro Seite. Erlaubt ist genau ein sichtbares <main>.
  • Alles in <section> verpacken. Ohne eigenes Thema und Überschrift ist ein <div> die bessere Wahl.
  • Jede Linkliste zur <nav> erklären. <nav> ist für wesentliche Navigation gedacht, nicht für jede Aufzählung von Links.
  • Gleiche <nav>-Bereiche nicht benennen. Bei mehreren Navigationen sorgt aria-label für Unterscheidbarkeit.

Zusammenhang mit Landmarks

<header>, <nav>, <main> und <footer> erzeugen automatisch ARIA-Landmarks, über die Screenreader-Nutzende direkt springen können – ganz ohne zusätzliche role-Attribute. Wie dieses Zusammenspiel funktioniert und wie du die Dokument-Outline prüfst, beschreibt Landmarks & Dokument-Outline.

Fazit

Mit <header>, <nav>, <main> und <footer> legst du in wenigen Zeilen ein robustes, barrierefreies Grundgerüst an. Es kostet keinen Mehraufwand gegenüber generischen <div>-Containern – liefert aber Orientierung, die sich durch die gesamte Seite zieht. Genau deshalb fange ich jedes Projekt damit an.