Der Seitenaufbau

In der letzten Lektion hast du gesehen, warum benannte Bereiche besser sind als div. Jetzt die Bausteine selbst. Es sind fünf, und zusammen ergeben sie das Grundmuster praktisch jeder Webseite.

01 / 04Die fünf Bereiche

<header>
  <p>Mein Kochblog</p>
  <nav>
    <ul>
      <li><a href="/">Start</a></li>
      <li><a href="/rezepte">Rezepte</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Linsensuppe</h1>
  <p>Braucht 30 Minuten und hält drei Tage.</p>
</main>

<footer>
  <p>Alle Rechte vorbehalten</p>
</footer>

Das Gerüst kennst du aus der vorigen Lektion, dort war es die aufgelöste div-Suppe. Hier schauen wir uns die Bausteine einzeln an.

header ist der einleitende Bereich: Logo, Seitenname, meist die Navigation, manchmal ein Suchfeld.

nav ist die Navigation, die du schon kennst. Sie steht typischerweise im header, kann aber auch anderswo stehen. Eine Seite darf mehrere haben, etwa das Hauptmenü oben und ein Servicemenü im Fuß.

main ist der Hauptinhalt, und das ist der wichtigste der fünf. Hier steht genau das, was diese eine Seite ausmacht. Alles, was sich auf jeder Unterseite wiederholt, gehört nicht hinein. Deshalb stehen header und footer außerhalb.

footer ist der Abschluss: Impressum, Kontakt, Copyright, Servicelinks.

02 / 04Genau ein main

main hat eine Regel, die die anderen nicht haben: Es darf genau einmal pro Seite sichtbar sein. Der Grund ist derselbe wie bei der id. Screenreader bieten einen direkten Sprung zum Hauptinhalt an, und dafür muss klar sein, welcher das ist. Bei zwei main ist die Frage nicht beantwortbar.

Praktisch heißt das: Wenn du beim Schreiben das Gefühl hast, hier bräuchte es ein zweites main, ist meistens ein section oder article gemeint.

03 / 04Der Nebeninhalt

Das fünfte Element ist aside:

<main>
  <h1>Linsensuppe</h1>
  <p>Braucht 30 Minuten und hält drei Tage.</p>

  <aside>
    <h2>Passt dazu</h2>
    <ul>
      <li><a href="/rezepte/brot">Selbstgebackenes Brot</a></li>
      <li><a href="/rezepte/salat">Wintersalat</a></li>
    </ul>
  </aside>
</main>

aside steht für Inhalte, die sich auf den Hauptinhalt beziehen, ohne selbst dazuzugehören. Verwandte Artikel, eine Infobox, eine Randnotiz, Werbung. Der Test: Könnte man es entfernen, ohne dass der Haupttext unvollständig wird? Wenn ja, ist es ein aside. Wo es steht, hängt davon ab, worauf es sich bezieht: Gehört die Box zu diesem einen Rezept, steht sie im main wie hier im Beispiel. Gehört sie zur ganzen Seite, etwa eine Liste anderer Blogs, steht sie daneben.

Die Position ist übrigens nicht festgelegt. aside heißt nicht „rechte Spalte“. Ob es rechts, links oder mitten im Text steht, entscheidet CSS. Das Element sagt nur, welche Rolle der Inhalt hat.

04 / 04header und footer gibt es mehrfach

Ein Missverständnis, das sich hartnäckig hält: dass header und footer nur einmal ganz oben und ganz unten vorkommen dürfen.

<main>
  <article>
    <header>
      <h1>Linsensuppe</h1>
      <p>Veröffentlicht am 28. Juli 2026</p>
    </header>

    <p>Braucht 30 Minuten und hält drei Tage.</p>

    <footer>
      <p>Geschrieben von Mario</p>
    </footer>
  </article>
</main>

Hier gehören beide zum article. Der header trägt Titel und Datum, der footer den Autor. Das ist gültig und sogar üblich: Beide Elemente beziehen sich immer auf den Bereich, in dem sie stehen.

Das Grundmuster aus dem ersten Beispiel deckt trotzdem den Normalfall ab, und mit header, main und footer hast du bereits eine Seite, in der sich ein Screenreader zurechtfindet.

Ein Wort noch zur Reihenfolge: Sie folgt dem Inhalt, nicht dem Aussehen. Eine Seitenspalte, die im fertigen Layout links steht, darf im Markup trotzdem hinter dem Hauptinhalt kommen. Wo etwas auf dem Bildschirm landet, ist eine Frage für CSS. Im HTML zählt, in welcher Reihenfolge jemand es vorgelesen bekommt oder mit der Tastatur durchläuft.