Semantisches HTML.
Semantisches HTML heißt, jedes Element nach seiner Bedeutung statt nach seinem Aussehen zu wählen — ein Überschriftenelement für eine Überschrift, ein Button-Element für eine Schaltfläche, ein Listenelement für eine Liste.
Der Wert semantischer Auszeichnung liegt darin, dass eine einzige Entscheidung mehreres kostenlos mitbringt. Wird das richtige Element verwendet, kommen Rollenangabe, Tastaturunterstützung, Fokussierbarkeit und eingebautes Verhalten vom Browser — nichts davon wird von Hand geschrieben.
Auch das Gegenteil gilt, und es ist teuer. Eine Schaltfläche mit einem div nachzubilden verlangt, vier Dinge von Hand neu aufzubauen: Fokussierbarkeit, Tastaturereignisse, Rollenangabe und gedrückten Zustand. Wird eines der vier vergessen, funktioniert die Komponente für manche Nutzende nicht — und meist wird mindestens eines vergessen.
- Was irgendwohin FÜHRT, ist ein Verweis; was etwas TUT, ist eine Schaltfläche. Werden sie verwechselt, bricht neben der Erwartung auch das Tastaturverhalten.
- Die Überschriftenebene wird nicht nach der optischen Größe gewählt; die Ebene beschreibt die Struktur, die Größe stellt CSS ein.
- Ein fett gesetzter Absatz ist keine Überschrift; in der Navigationsliste eines Screenreaders erscheint er nie.
- Eine Struktur, die wie eine Liste aussieht, aber nicht als solche ausgezeichnet ist, sagt nicht, wie viele Punkte es gibt.
- Tabellen sind für Daten da, nicht für Layout; eine Layout-Tabelle wird Zeile für Zeile und Spalte für Spalte vorgelesen.
Der Nutzen semantischen HTMLs beschränkt sich auch nicht auf Barrierefreiheit. Suchmaschinen-Crawler leiten die Dokumentstruktur aus demselben Markup ab, und Antwortmaschinen finden beim Zitieren einer Passage die Abschnittsgrenzen an den Überschriften. Drei Leserschaften — Mensch, Crawler und Modell — schauen auf dieselbe Quelle.
Die praktische Prüfmethode ist einfach: Schalten Sie das Stylesheet der Seite ab und lesen Sie das verbleibende HTML. Ist das Dokument weiterhin verständlich, sehen Überschriften wie Überschriften aus und ergibt die Reihenfolge Sinn, ist die semantische Struktur tragfähig. Ist sie es nicht, steckt die Bedeutung der Seite im CSS — und keine Leserschaft, die kein CSS liest, kann sie sehen.
Semantische Entscheidungen haben auch eine Pflegeseite. Eingebaute Elemente entwickeln sich mit den Browser-Aktualisierungen weiter; erscheint eine neue Hilfstechnik, müssen Sie für deren Unterstützung nichts tun. Von Hand gebaute Nachbildungen erstarren dagegen in den Annahmen ihres Entstehungstags und laufen mit der Zeit auseinander.
Eine praktische Gewohnheit: Prüfen Sie vor dem Schreiben einer neuen Komponente, ob HTML bereits eine Entsprechung hat. Für aufklappbare Blöcke, Fortschrittsbalken, Datumseingaben und Dialoge gibt es eingebaute Elemente — und die meisten Teams schreiben sie von Grund auf neu, weil sie davon nichts wissen.