Das Internet-Lexikon

Semantisches HTML

Semantisches HTML bezeichnet die Verwendung von HTML-Elementen entsprechend ihrer inhaltlichen Bedeutung - etwa button, nav oder h1 - statt bedeutungsloser div- und span-Container, damit Struktur und Funktion einer Seite auch für Browser und assistive Technologien erkennbar sind.

Kurz erklärt

HTML bringt für die meisten gängigen Bausteine einer Website bereits passende Elemente mit: <nav> für Navigationsbereiche, <button> für klickbare Aktionen, <h1>–<h6> für Überschriften in hierarchischer Reihenfolge, <main> für den Hauptinhalt. Diese Elemente transportieren ihre Bedeutung automatisch an Browser und assistive Technologien - ein Screenreader kündigt einen <button> etwa als “Schaltfläche” an und macht ihn ohne zusätzlichen Code per Tastatur bedienbar. Werden stattdessen ausschließlich bedeutungslose <div>- oder <span>-Elemente mit CSS-Klassen verwendet, geht diese Information verloren.

Beispiel

<div class="button" onclick="submit()">Absenden</div> sieht optisch wie ein Button aus, ist aber für einen Screenreader nur ein unauffälliger Textblock ohne erkennbare Funktion und lässt sich ohne zusätzlichen Code (Tastaturfokus, role, Tastendruck-Handler) nicht per Tastatur bedienen. <button onclick="submit()">Absenden</button> bringt all das nativ mit.

Warum ist das relevant?

Semantisches HTML ist die Grundlage, auf der Barrierefreiheit aufbaut, bevor überhaupt zusätzliche Techniken wie ARIA nötig werden. Viele Anforderungen aus den WCAG - korrekte Überschriftenstruktur, Tastaturbedienbarkeit, erkennbare Rollen von Elementen - lassen sich allein durch die Wahl der richtigen HTML-Elemente erfüllen, ganz ohne zusätzliche Attribute.

Häufige Missverständnisse

Die Annahme, eine per CSS optisch wie ein natives Element gestaltete Komponente (etwa ein <div>, das wie ein Button aussieht) sei für Nutzer gleichwertig, ist falsch - visuelles Erscheinungsbild und semantische Bedeutung sind zwei unabhängige Dinge. Auch Überschriften-Tags rein wegen ihrer Standard-Formatierung zu verwenden (etwa ein <h3>, nur weil es “klein genug” aussieht, unabhängig von der tatsächlichen Dokumentstruktur) untergräbt die semantische Funktion der Überschriftenhierarchie.

Weiterführende Inhalte

Quellen & Dokumentation