Semantisches HTML
Das passende Element sagt schon alles
Navigation, Liste, Rolle: drei Stellen der Layoutvorlage.
Struktur sichtbar machen
Aus einer Seite werden zwei Navigationskarten
Semantische Elemente ordnen nicht nur den Quelltext. Sie erzeugen Orientierungspunkte, die Browser und assistive Technik auswerten können.
Dokument-Röntgenbild
Dieselben Inhalte, drei Ansichten
Die sichtbare Seite, ihre HTML-Elemente und die daraus abgeleiteten Bereiche und Überschriften beschreiben dieselbe Struktur.
<header>→ banner<nav>→ navigation<main>→ main<aside>→ complementary<footer>→ contentinfoDer Kontext entscheidet: Ein header direkt im body kann den Seitenkopf bilden. Derselbe Tag in einem article ist nur dessen Kopf und keine zusätzliche Banner-Landmarke.
20 Elemente
Der semantische Atlas
Jeder Eintrag verbindet Zweck und häufige Fehlentscheidung.
Seitenbereiche
header- Kopf eines Dokuments oder Abschnitts.Nicht automatisch der Seitenkopf.
nav- Block wichtiger Navigationslinks.Nicht jeder Linkblock.
main- Einmaliger Hauptinhalt der Seite.Nicht mehrfach sichtbar.
footer- Abschluss von Seite oder Abschnitt.Kontext bestimmt die Landmarke.
aside- Ergänzung, separat verständlich.Nicht bloß die rechte Spalte.
Inhaltsblöcke
section- Thematischer Abschnitt.Braucht meist eine Überschrift.
article- Eigenständig nutzbarer Inhalt.Nicht jede visuelle Karte.
h1–h6- Ränge der Gliederung.Nicht nach Schriftgröße wählen.
p- Absatz aus Fließtext.Nicht als Abstandhalter.
blockquote- Längeres Zitat einer Quelle.Nicht nur für Einzug.
Beziehungen
ul / ol- Ungeordnete oder geordnete Liste.Direkte Kinder sind Einträge.
li- Eintrag innerhalb einer Liste.Nicht frei neben der Liste.
figure- Abbildung mit eigener Einheit.Unterschrift als figcaption.
table- Datenbezug über Zeilen und Spalten.Nicht für Seitenlayout.
address- Kontakt zum Dokument oder Artikel.Nicht jede Postanschrift.
Aktion und Text
a- Verweis mit einem Ziel.Ohne href kein echter Link.
button- Aktion in der aktuellen Oberfläche.Nicht als Klick-div nachbauen.
label- Sichtbarer Name eines Feldes.for muss zur id passen.
time- Zeitpunkt oder Dauer.datetime maschinenlesbar setzen.
strong / em- Wichtigkeit oder Betonung.Nicht nur für Fettdruck oder Kursiv.
Kopierbares Gerüst
Der Code hinter dem Röntgenbild
Native Elemente liefern die Grundbedeutung. Namen ergänzen Sie dort, wo mehrere gleichartige Bereiche sonst nicht unterscheidbar wären.
HTML dokument.html
<body>
<a class="skip-link" href="#inhalt">Zum Inhalt</a>
<header>
<p>Magazin</p>
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/">Start</a></li>
<li><a href="/themen">Themen</a></li>
</ul>
</nav>
</header>
<main id="inhalt" tabindex="-1">
<h1>Neue Perspektiven</h1>
<section aria-labelledby="neu">
<h2 id="neu">Neu im Magazin</h2>
<article>
<h3>Gute Formulare</h3>
<p>Veröffentlicht am
<time datetime="2026-09-08">8. September 2026</time>.
</p>
</article>
</section>
<aside aria-labelledby="passend">
<h2 id="passend">Passend dazu</h2>
<ul>
<li><a href="/formulare">Formulare prüfen</a></li>
</ul>
</aside>
</main>
<footer>
<a href="/kontakt">Kontakt</a>
<a href="/impressum">Impressum</a>
</footer>
</body>Prüffolge: CSS ausblenden → Bereiche auflisten → Überschriften nach Rang durchlaufen. Inhalt, Landmarken und Gliederung müssen dieselben Beziehungen zeigen.
Primärquellen zum Gegenprüfen
Aus dem Prüfbericht
Drei Stellen der Layoutvorlage
Kritisch Die Navigationsliste enthält einen Absatz Regel list
In der ul der Navigation steht ein p zwischen den Einträgen. Der Absatz gehört vor die Liste.
Kritisch Ein Menüpunkt steht außerhalb der Liste Regel listitem
Das letzte li steht hinter dem schließenden ul-Tag. In der Liste zählt es mit, davor gehört es zu keiner.
Kritisch Eine erfundene Rolle am Layout-div Regel aria-roles
role="menue" ist keine ARIA-Rolle. Löschen Sie das Attribut und nehmen Sie nav und ul, die ihre Bedeutung mitbringen.
Zum Mitnehmen
Die Layoutvorlage, korrigiert
Aus divs mit erfundenen Rollen werden nav, ul und li.
Korrektur in 3 Schritten ansehen
Aus dem div-Menü wird eine Navigation
nav, ul und li bringen Bereich, Liste und Eintrag von selbst mit. Die erfundene Rolle entfällt ersatzlos.
KorrekturvergleichSchritt 1 · HTML Vorher
<div role="menue"> <div class="eintrag">Start</div> <div class="eintrag">Kontakt</div> </div>Nachher
<nav aria-label="Hauptmenü"> <ul> <li><a href="/">Start</a></li> <li><a href="/kontakt">Kontakt</a></li> </ul> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Hauptmenü, Navigation, Liste mit zwei Einträgen“.
Den verirrten Menüpunkt einsortieren
Ein li außerhalb einer ul gehört zu keiner Liste. Innerhalb zählt es mit und wird als Eintrag angesagt.
KorrekturvergleichSchritt 2 · HTML Vorher
<ul> <li><a href="/">Start</a></li> </ul> <li><a href="/kontakt">Kontakt</a></li>Nachher
<ul> <li><a href="/">Start</a></li> <li><a href="/kontakt">Kontakt</a></li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm zählt so viele Einträge, wie Sie Menüpunkte sehen.
Den beschreibenden Satz aus der Liste holen
Direkt in einer ul stehen nur li. Der Satz bleibt lesbar, wird aber nicht mehr als weiterer Menüpunkt ausgegeben.
KorrekturvergleichSchritt 3 · HTML Vorher
<ul> <p>Schnellzugriff</p> <li><a href="/">Start</a></li> </ul>Nachher
<p>Schnellzugriff</p> <ul> <li><a href="/">Start</a></li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Die angesagte Zahl der Einträge stimmt mit den sichtbaren Menüpunkten überein.