Kurz-Fakten

  • HTML5 führte mit header, nav, main, article, section, aside und footer eigene Elemente für Seitenbereiche ein
  • main darf pro Dokument nur einmal ohne hidden-Attribut vorkommen
  • Screenreader bieten Sprungmarken anhand dieser Elemente an – ohne sie muss der Nutzer die Seite linear durchhören
  • Ein div mit Klick-Behandlung ersetzt kein button: Fokus, Tastaturbedienung und Rollenansage fehlen und müssen nachgebaut werden
  • Eine Klasse namens "nav" erzeugt keine Semantik; sie ist für den Browser bedeutungsloser Text

Einordnung für die Praxis

Der praktische Nutzen zeigt sich beim ersten Tastaturtest. Wer eine Seite nur mit Tabulator und Eingabetaste bedient, merkt in zwei Minuten, ob Schaltflächen echte button-Elemente sind. Nachgebaute Klick-Container werden übersprungen – die Funktion existiert für einen Teil der Nutzer schlicht nicht.

Für Suchmaschinen und Sprachmodelle wirkt Semantik indirekt, aber in dieselbe Richtung: Ein Abschnitt in <article> mit eigener Überschrift lässt sich als abgeschlossene Einheit entnehmen. Ein verschachtelter div-Turm zwingt zum Raten, wo ein Gedanke anfängt und aufhört.

Verwandte Begriffe