Das Wort Semantik (öffnet in neuem Tab) kommt aus dem Altgriechischen und steht für die Bedeutungslehre. Bei Websites geht es um die Beziehung der Inhalte untereinander und ihre Art, ausgezeichnet durch HTML-Elemente. Erst dadurch können andere Programme und Geräte die Informationen auslesen und weiterverarbeiten.

Fehlt diese Auszeichnung, sieht eine Seite für sehende Nutzende oft trotzdem richtig aus, während sie für Screenreader-Nutzende, Suchmaschinen oder andere Tools nur eine Ansammlung bedeutungsloser Textblöcke ist.

Bei digitaler Barrierefreiheit bedeutet das zum Beispiel: Überschriften werden auch als solche ausgegeben und zur Strukturierung genutzt. Navigation, Hauptinhalt und ergänzende Informationen werden unterschieden und automatisch als solche erkannt. Ein Datum steckt in <time datetime="…"> statt in reinem Text: Das kann dann nicht nur ein Screenreader vorlesen, sondern zum Beispiel auch eine Kalender-App direkt übernehmen. Ein Formularfeld trägt seinen passenden Typ (email, tel, date), wodurch auf dem Smartphone automatisch die richtige virtuelle Tastatur erscheint. Und Links oder Formularelemente lassen sich standardmäßig über assistive Werkzeuge wie Sprachausgabe oder Screenreader bedienen.

Trennung von Inhalt und Design

In der Entwicklung spricht man auch von der Trennung von Inhalt und Design. Inhalte lassen sich eigenständig darstellen, zum Beispiel angepasst über den Browser. Eine Überschrift wird durch ihre Auszeichnung als solche erkannt, egal wie sie gestaltet ist.

Die optische Darstellung lässt sich auch über generische Elemente wie <span> und <div> steuern. Das Problem: Diese Elemente haben keine weiteren Eigenschaften und zeichnen nichts genauer aus. Fett markierte Wörter sind dadurch nicht automatisch wichtig, groß gestellter Text keine Überschrift – beides bleibt normaler Text, ohne Beziehung zum Inhalt.

HTML
<!-- so nicht -->
<div onclick="submit()">Absenden</div>

<!-- so schon -->
<button type="submit">Absenden</button>

Ein <div> mit Klick-Handler sieht wie ein Button aus, ist für Tastatur und Screenreader aber unsichtbar als Bedienelement. Assistive Technologien erkennen ein <button> automatisch als interaktives Element: Bei der Tastatur-Navigation bekommt es den Fokus, ein Screenreader kündigt es als Schaltfläche an, und mit Enter oder Leertaste lässt es sich auslösen. Ein <div> bringt nichts davon von Haus aus mit – das müsste man komplett von Hand nachbauen, mit tabindex, ARIA-Rolle und eigener Tastatur-Logik. Deshalb ist <button> hier die einzige Lösung, die ohne Zusatzaufwand funktioniert.

Wenn fett nicht gleich wichtig ist

Ein Artikel wird durch Überschriften gegliedert, wichtige Begriffe und Kernaussagen fett hervorgehoben. Gehen wir davon aus, die Inhalte sind grundsätzlich sauber ausgezeichnet: Der Teaser ist fett gestaltet, aber semantisch ein ganz normaler Absatz, ohne besondere Hervorhebung. Die Überschriften sind ebenfalls fetter als der übrige Text, auch das ist für die Bedeutung irrelevant. Die Semantik trägt sich über die korrekte Auszeichnung, nicht über die Optik.

Anders liegt der Fall, wenn wichtige Aussagen hervorgehoben werden sollen. Dafür gibt es das <strong>-Element. Die meisten Browser stellen es standardmäßig fett dar, semantisch sagt es aber aus, dass der Inhalt eine starke Wichtigkeit oder Dringlichkeit hat, unabhängig von seiner Darstellung.

Ob und wie ein Screenreader das auch akustisch umsetzt, hängt vom Programm und dessen Einstellungen ab. Standardmäßig tun das die meisten nicht, manche bieten es als Option an. Semantisch bedeutungslos macht das <strong> deshalb trotzdem nicht: Eine Suchmaschine oder ein künftiges Tool kann „wichtig“ auswerten, wo ein reines <b> nur fett aussieht.

Ähnliche Elemente sind <em> für Betonung im Satz oder <small> für Nebenbemerkungen. Beide haben ein Standard-Styling, das ist für die Bedeutung aber zweitrangig: Auch ein <small>-Text kann per CSS in normaler Schriftgröße dargestellt werden und trägt trotzdem die Bedeutung eines Kommentars oder Kleingedruckten. Entscheidend ist die Auszeichnung, nicht die Schriftgröße.

Element Bedeutung Standard-Darstellung Kurzhinweis
<strong> starke Wichtigkeit, Dringlichkeit fett akustische Betonung ist optional, keine Garantie
<b> rein visuell hervorgehoben, keine besondere Wichtigkeit fett z. B. Produktname im Fließtext
<em> Betonung im Satzzusammenhang kursiv kann Sprachausgabe im Idealfall verändern
<i> rein visuell abgesetzt, z. B. Fachbegriff kursiv kein Ersatz für <em>
<small> Nebenbemerkung, rechtlich/inhaltlich nachrangig kleinere Schrift keine „unwichtige“ Bedeutung

Zu <strong> und <b>, <em> und <i> gibt es einiges mehr zu sagen, als hier reinpasst. Dazu folgen eigene Artikel.

Auch ganze Bereiche tragen Bedeutung

Ähnliches gilt oberhalb der Wortebene, bei den Bereichen einer Seite:

Element Landmark-Rolle Zweck
<header> banner Kopfbereich, meist mit Logo und Titel
<nav> navigation Navigationsbereich, überspringbar
<main> main Hauptinhalt, Sprungziel für „Zum Inhalt springen“
<aside> complementary ergänzender Inhalt, nicht Teil des Hauptinhalts
<footer> contentinfo Fußbereich

Ein Screenreader kann direkt zwischen diesen Bereichen springen, wenn sie tatsächlich ausgezeichnet sind. Bei <div class="nav"> funktioniert das nicht.

Wer mehr wissen will: Die MDN-Referenz für HTML-Elemente (öffnet in neuem Tab) listet zu jedem Element die zugehörige Semantik und Rolle auf, ein guter Einstieg über diese beiden Tabellen hinaus.

Was eine Passage ist, entscheidet sich nicht über ihr Aussehen, sondern über ihre Auszeichnung. Die lesen Screenreader, Suchmaschinen und Feedreader aus, wenn sie eine Seite verarbeiten.