Semantisches HTML

Was diese Prüfung macht

Scannt das gerenderte DOM und zählt semantische HTML5-Elemente — <article>, <section>, <nav>, <header>, <footer>, <aside>, <main>, <figure>, <figcaption>, <time> — gegen die Gesamt-Element-Zahl. Seiten, die fast nur aus verschachtelten <div> und <span> bestehen, scoren niedrig; Seiten mit klarem semantischem Skelett scoren hoch.

Warum es zählt

Semantisches HTML ist der Unterschied zwischen Markup, das eine Maschine parsen, und Markup, das eine Maschine verstehen kann. Ein <div class="header"> ist unsichtbar für alles, was deine CSS-Klassen nicht liest. Ein <header> ist eindeutig: Jeder Browser, Screenreader, Suchcrawler und LLM-Agent weiß, welche Rolle dieser Block auf der Seite spielt.

Drei Publika lesen dein HTML:

• KI-Agenten (ChatGPT, Perplexity, Google AI Overviews) extrahieren und zitieren Inhalte. Sie ziehen verlässlich aus <article>, <main> und <time datetime>. In Div-Suppe raten sie.
• Screenreader erzeugen eine Landmark-Karte der Seite, damit Nutzer:innen direkt zu Navigation, Hauptinhalt oder Footer springen können. Keine semantischen Tags heißt keine Landmarks. Kombiniere diese Prüfung mit ARIA-Landmarks.
• Suchmaschinen gewichten Inhalt in <article> und <main> höher als in generischen Containern — und ignorieren Boilerplate in <nav> und <footer> verlässlich.

Der Fix ist billig. Die Kosten, es nicht zu tun, summieren sich über jede Seite der Site.

So behebst du es

Ersetze generische Container durch das Element, das ihre Rolle beschreibt.

Seiten-Chrome:

<!-- Vorher -->
<div class="site-header">
  <div class="nav">...</div>
</div>
<div class="main-content">...</div>
<div class="site-footer">...</div>

<!-- Nachher -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Blogposts und Artikel: Wickle jeden Post in <article> und markiere Daten mit <time datetime>. Das datetime-Attribut ist maschinenlesbar und taucht in KI-Zitaten und Schema.org-Auto-Extraktion auf.

<article>
  <header>
    <h1>Post-Titel</h1>
    <time datetime="2026-05-11">11. Mai 2026</time>
  </header>
  <p>Post-Body...</p>
</article>

Bilder mit Bildunterschriften: Nutze <figure> + <figcaption>, wenn die Bildunterschrift Teil des Inhalts ist (nicht nur ein Hover-Tooltip).

<figure>
  <img src="chart.png" alt="Umsatzwachstum 2024–2026" />
  <figcaption>Quartalsumsatz, Q1 2024 bis Q1 2026.</figcaption>
</figure>

Wann <section> vs. <div>: Nutze <section> für einen benannten Bereich der Seite — einen, der in einer Gliederung eine Überschrift hätte (Pricing, Features, FAQ). Nutze <div> für rein präsentationale Gruppierung (ein Flex-Wrapper, ein Card-Rand). Wenn du keine einzeilige Überschrift dafür schreiben kannst, ist es ein <div>.

Quervergleich mit ARIA-Landmarks und aussagekräftiger Linktext — diese Prüfungen verstärken sich gegenseitig.

Häufig gestellte Fragen

Macht es einen Unterschied, ob ich <div role="main"> statt <main> nutze?

Für Barrierefreiheit sind sie äquivalent — beide exponieren ein main-Landmark. Für alle anderen (KI-Agenten, Suchcrawler, Code-Reviewer) ist <main> klarer und kürzer. Nutze das native Element. ARIA-Rollen existieren, um Elemente nachzubessern, die ihre Rolle nicht ausdrücken können — nicht, um solche zu ersetzen, die es können.

Kann ich mehrere <header> und <footer> pro Seite haben?

Ja. <header> und <footer> sind auf ihren nächsten Sectioning-Ancestor (<article>, <section>, <main> oder das Dokument) skopiert. Ein Blogpost kann seinen eigenen <header> (Titel + Datum) in <article> haben, plus den Site-weiten <header> oben auf der Seite. <main> ist die Ausnahme — nur eines pro Dokument.

Mein CMS-Theme nutzt überall divs. Lohnt sich ein Rewrite?

Wenn du das Template kontrollierst, ja — eine Einmal-Bearbeitung verbessert Barrierefreiheit, SEO und KI-Extrahierbarkeit für jede Seite, die es nutzt. Wenn du es nicht kontrollierst (ein gehostetes Theme auf Shopify/Squarespace), konzentriere dich auf den Content-Slot, wo du Kontrolle hast: Wickle Posts in <article>, markiere Daten mit <time>, nutze <figure> für Bilder mit Bildunterschrift. Das Chrome verbessert sich, wenn das Theme aktualisiert wird.