HTML – Semantische Struktur für das Web
HTML (HyperText Markup Language) ist die Grundstruktur jeder Website. Es definiert nicht wie etwas aussieht — das ist CSS — sondern was etwas bedeutet. Semantisches HTML kommuniziert Bedeutung an Browser, Suchmaschinen und Screenreader gleichzeitig.
Semantische HTML-Elemente
header
Bedeutung: Kopfbereich — Verwendung: Seiten- oder Abschnitts-Header
nav
Bedeutung: Navigation — Verwendung: Haupt- und Unternavigation
main
Bedeutung: Hauptinhalt — Verwendung: Einmal pro Seite, primärer Content
article
Bedeutung: Eigenständiger Inhalt — Verwendung: Blog-Post, Nachricht, Produkt
section
Bedeutung: Thematischer Abschnitt — Verwendung: Gruppierung verwandter Inhalte
aside
Bedeutung: Ergänzender Inhalt — Verwendung: Sidebar, verwandte Links
footer
Bedeutung: Fußbereich — Verwendung: Seiten- oder Abschnitts-Footer
figure
Bedeutung: Medien mit Beschriftung — Verwendung: Bilder, Diagramme, Code
Überschriftenhierarchie
Die Regel
Exakt eine H1 pro Seite (Seitentitel). Keine Ebenen überspringen: nach H2 kommt H3, nicht H4. Überschriften spiegeln die inhaltliche Hierarchie wider — nicht das visuelle Design. Für Styling ohne semantische Bedeutung: CSS-Klassen auf anderen Elementen.
Warum es wichtig ist
Screenreader navigieren per Überschriften-Liste durch Seiten. Suchmaschinen werten die Hierarchie für Themenverständnis aus. Falsche Hierarchien sind einer der häufigsten Accessibility-Fehler — und einer der einfachsten zu vermeiden.
Häufig gestellte Fragen
Was ist der Unterschied zwischen div und section?
Ein div ist ein generischer Container ohne semantische Bedeutung — für Styling und Layout. Eine section gruppiert thematisch zusammengehörige Inhalte und signalisiert dem Browser dass ein neuer Themenbereich beginnt. Im Zweifel: section für Inhaltsgruppen, div für rein visuelle Wrapper.
Muss ich immer semantisches HTML verwenden?
Ja — semantisches HTML ist keine Kür, sondern Grundlage für Barrierefreiheit, SEO und wartbaren Code. Divs und Spans nur wenn kein semantisches Element passt. Die meisten modernen Browser und Screenreader bauen auf semantischen Elementen auf.