Der Seitenaufbau

Fast jede Seite hat oben einen Kopf mit Namen und Menü, unten einen Fuß mit Kontakt und Impressum und dazwischen das, worum es auf dieser Seite geht. HTML hat für jeden dieser Bereiche ein eigenes Element, und mit ihnen findet sich ein Screenreader auf jeder Seite zurecht, die so gebaut ist.

01 / 05Die 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 eine halbe Stunde und hält drei Tage.</p>
</main>

<footer>
  <nav>
    <ul>
      <li><a href="/impressum">Impressum</a></li>
      <li><a href="/datenschutz">Datenschutz</a></li>
    </ul>
  </nav>
</footer>

header ist der einleitende Bereich mit Logo oder Seitennamen, meist mit der Navigation, manchmal mit einem Suchfeld.

nav ist die Navigation aus Abschnitt 4. Sie steht typischerweise im header, darf aber auch woanders stehen, und eine Seite darf mehrere haben. Im Beispiel steht eine zweite im Fuß, mit Impressum und Datenschutz.

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

footer ist der Abschluss mit Kontakt, Impressum, Copyright und Servicelinks.

Das fünfte Element, aside, kommt gleich.

02 / 05Ein main pro Seite

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

Wer beim Schreiben das Gefühl hat, hier bräuchte es ein zweites main, meint meistens ein section oder ein article. Die beiden kommen in der nächsten Lektion.

03 / 05Der Nebeninhalt

<main>
  <h1>Linsensuppe</h1>
  <p>Braucht eine halbe Stunde 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 Inhalt, der sich auf den Hauptinhalt bezieht, ohne selbst dazuzugehören: verwandte Rezepte, eine Infobox, eine Randnotiz, Werbung. Der Test ist, ob der Haupttext unvollständig würde, wenn man es entfernt. Wenn nicht, ist es ein aside.

Wo es steht, hängt daran, worauf es sich bezieht. Gehört die Box zu diesem einen Rezept, steht sie im main wie im Beispiel. Gehört sie zur ganzen Seite, etwa eine Liste anderer Blogs, steht sie daneben.

Mit dem Platz auf dem Bildschirm hat aside nichts zu tun. Ob es rechts, links oder mitten im Text erscheint, entscheidet CSS, das Element sagt nur, welche Rolle der Inhalt hat.

04 / 05header und footer gibt es mehrfach

<main>
  <article>
    <header>
      <h1>Linsensuppe</h1>
      <p>Veröffentlicht am <time datetime="2026-07-28">28. Juli 2026</time></p>
    </header>

    <p>Braucht eine halbe Stunde 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 Namen dessen, der den Beitrag geschrieben hat. Das ist gültig und sogar üblich, denn beide Elemente beziehen sich immer auf den Bereich, in dem sie stehen.

Die Reihenfolge im Markup folgt dem Inhalt und nicht dem Aussehen. Eine Seitenspalte, die im fertigen Layout links steht, darf im Code trotzdem hinter dem Hauptinhalt kommen. Wo etwas auf dem Bildschirm landet, regelt CSS. Im HTML zählt, in welcher Reihenfolge jemand es vorgelesen bekommt oder mit der Tastatur durchläuft.

05 / 05Was in den Fußbereich gehört

<footer>
  <address>
    Mein Kochblog<br>
    Musterstraße 1<br>
    12345 Musterstadt<br>
    <a href="mailto:hallo@example.com">hallo@example.com</a>
  </address>

  <p><small>Alle Rezepte ohne Gewähr. Nährwerte sind geschätzt.</small></p>
</footer>

Zwei Elemente sieht man fast nur hier, und beide werden gern nach ihrem Aussehen gewählt.

address ist die Kontaktangabe für den Bereich, in dem es steht. Im Fuß der Seite ist das der Kontakt zur ganzen Seite, in einem article der zu diesem Beitrag. Der Browser setzt es kursiv, und deshalb landet es oft um beliebige Anschriften. Der Wohnort einer Person, über die ein Rezept erzählt, gehört nicht hinein, die Anschrift im Impressum schon. Die br darin sind Umbrüche, die zum Inhalt gehören, wie in der Anschrift aus Abschnitt 2.

small ist für Nebenbemerkungen da, also für Haftungsausschlüsse, Copyright-Zeilen und Angaben ohne Gewähr. Kleinere Schrift ist nur seine Voreinstellung. Wer bloß Text verkleinern will, macht das mit CSS.

In der Aufgabe stehen die Teile einer Rezeptseite lose untereinander und kommen in ihre Bereiche.