Semantik im Web bedeutet die sinnhafte Auszeichnung von Inhalten durch HTML-Elemente. Diese vermitteln Bedeutung und Struktur – nicht nur visuell, sondern auch für assistive Technologien. Semantisch korrektes HTML ist damit eine Grundvoraussetzung für Barrierefreiheit. Nebenbei ist ein semantischer HTML-Code auch leichter zu warten und besser geeignet für Suchmaschinen.
Grundprinzipien semantischer Auszeichnung:
Elemente entsprechend ihrer Bedeutung verwenden
Struktur und Inhalt voneinander trennen
Hierarchische Beziehungen abbilden
Landmarks (Orientierungspunkte) definieren
Interaktive Elemente korrekt kennzeichnen
Wichtige semantische Elemente:
<header>– Kopfbereich<nav>– Navigation<main>– Hauptinhalt<article>– In sich abgeschlossener Inhalt<section>– Thematisch zusammenhängender Bereich<aside>– Ergänzender Inhalt<footer>– Fußbereich<h1>bis<h6>– Überschriftenhierarchie
Häufige Fehler:
<div>und<span>übermäßig nutzenFalsche Überschriftenhierarchie
Fehlende Landmark-Bereiche
Tabellen für Layout verwenden
Links als Buttons stylen (oder umgekehrt)
Für die Entwicklung bedeutet dies:
Native HTML-Elemente bevorzugen
ARIA nur wenn nötig einsetzen
Regelmäßige Strukturprüfungen durchführen
Dokumentenstruktur planen
Semantik vor Design priorisieren
Testing der Semantik:
HTML-Validierung
Strukturansicht im Browser
Screenreader-Test
Die korrekte semantische Auszeichnung ist die Basis für barrierefreie Webseiten – sie ermöglicht es assistiven Technologien, Inhalte richtig zu interpretieren und an die Nutzenden zu vermitteln.
