Semantisches HTML heißt, für jeden Bestandteil das Element zu nehmen, das seine Bedeutung trifft: eine Überschrift als Überschrift, eine Navigation als Navigation. Die Alternative wäre, alles aus gleichförmigen Kästen zu bauen und die Bedeutung allein über das Aussehen herzustellen.
- Semantisches HTML
Schreibweise, bei der jedes Element nach der Bedeutung seines Inhalts gewählt wird und nicht nach der gewünschten Darstellung.
Beispiel: „Semantisches HTML macht die Gliederung einer Seite auch ohne Bildschirm erkennbar.“Auch: Semantic HTML.
Was der Unterschied ausmacht
Eine Seite lässt sich vollständig aus bedeutungslosen Kästen bauen. Sie sieht dann aus wie gewollt, und für jeden, der sie nicht ansieht, besteht sie aus einer Reihe gleicher Behälter. Mit den passenden Elementen steht dieselbe Gliederung im Dokument selbst.
<div class="nav">…</div>
<nav>…</nav>Beide Zeilen lassen sich gleich gestalten. Nur die zweite sagt, worum es sich handelt.
Was davon abhängt
Screenreader bieten ihren Nutzern an, zwischen Bereichen und Überschriften zu springen. Diese Liste entsteht aus den Elementen. Fehlen sie, bleibt nur, den Text von vorn bis hinten zu hören.
Suchmaschinen gewichten Überschriften und erkennen, was Hauptinhalt ist und was Navigation. Und auch im Team hilft es: Wer ein halbes Jahr später eine Vorlage öffnet, sieht am Element, was gemeint war.
Wo die Grenze liegt
Nicht jeder Bereich hat eine Bedeutung. Ein Kasten, der nur dazu da ist, drei Elemente nebeneinander zu stellen, ist ein div, und das ist richtig so. Die Spezifikation sagt das für das section-Element ausdrücklich: Für reines Styling gehört dort ein div hin.
Die Frage lautet also nicht, wie sich ein div vermeiden lässt, sondern ob der Bestandteil eine Bedeutung hat, für die es ein Element gibt.