Semantisches HTML: main, article, nav und section richtig nutzen

Warum das wichtig ist

Eine typische Seite besteht zu einem guten Teil aus Dingen, die nicht der Inhalt sind: Menü, Cookie-Hinweis, Footer mit Impressum, Seitenleiste mit Newsletter-Anmeldung. Ein Crawler, der deine Leistung verstehen soll, muss das aussortieren. Mit <main> sagst du ihm direkt, wo es losgeht. Mit <nav> markierst du, was er als Navigation behandeln kann.

Wie genau ChatGPT, Claude oder Perplexity eine Seite zerlegen, legt keiner der Anbieter offen. Werkzeuge zur Inhaltserkennung, wie sie etwa hinter dem Lesemodus von Browsern stecken, nutzen semantische Elemente aber als Hinweise. Screenreader verwenden dieselben Elemente als Sprungmarken, mehr dazu unter Seitenbereiche (Landmarks). Du verbesserst die Seite also für Maschinen und für Menschen mit Sehbehinderung zugleich.

Die Elemente im Überblick

• ·<header>: Kopfbereich mit Logo und meist der Navigation. Darf auch innerhalb eines Artikels vorkommen.
• ·<nav>: Hauptnavigation und andere wichtige Linkgruppen. Nicht jede Linkliste braucht ein eigenes nav.
• ·<main>: der eigentliche Inhalt, genau einmal pro Seite.
• ·<article>: ein Inhalt, der auch für sich allein stehen könnte, etwa ein Blogbeitrag, ein Produkt oder eine Referenz.
• ·<section>: ein thematischer Abschnitt, in der Regel mit eigener Überschrift.
• ·<footer>: Fußbereich mit Kontakt, Impressum und Datenschutz.

So prüfst du es selbst

Öffne den Quelltext mit Strg+U und such nacheinander nach <main, <nav, <header und <footer. Findest du nur verschachtelte <div>-Container mit Klassennamen, hast du Nachholbedarf.

Einen groben Praxistest liefert der Lesemodus im Browser, in Firefox über das Symbol in der Adressleiste. Zeigt er deinen Text sauber ohne Menü und Footer, erkennt auch eine Maschine den Inhalt gut. Fehlt der Lesemodus oder zeigt er ein Durcheinander, ist die Struktur unklar.

Mit dem kostenlosen Check geht es automatisch: checkfrei zählt header, nav, main, article, section und footer. Ab drei verschiedenen ist es gut, bei einem oder zwei gibt es eine Warnung, ohne eines davon einen Fehler.

So behebst du es

Am Design musst du dafür nichts ändern. Ein <main> sieht ohne eigenes CSS genauso aus wie ein <div>, du tauschst nur den Namen des Elements. So sieht ein schlichtes Grundgerüst aus:

<body>
  <header>
    <a href="/">Schreinerei Huber</a>
    <nav aria-label="Hauptmenü">
      <ul>
        <li><a href="/leistungen">Leistungen</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <main id="inhalt">
    <h1>Einbauschränke nach Maß in Traunstein</h1>
    <section>
      <h2>Für Dachschrägen und Nischen</h2>
      <p>...</p>
    </section>
  </main>

  <footer>
    <a href="/impressum">Impressum</a>
    <a href="/datenschutz">Datenschutz</a>
  </footer>
</body>

Typische Fehler

• ·Zwei <main>-Elemente, etwa eins im Layout und eins in der Seite.
• ·Jeden Bereich in <section> packen, auch ohne Überschrift. Dann ist ein <div> die ehrlichere Wahl.
• ·Überschriften nach Optik wählen. Die beste Struktur hilft nur halb, wenn darin eine H4 auf eine H2 folgt, siehe Überschriften-Hierarchie.