Warum Semantik zählt

Bisher ging es darum, welche Bausteine es gibt. Jetzt geht es um die Frage, wann man welchen nimmt. Und die Antwort lautet fast immer: den, der am genauesten sagt, was der Inhalt ist.

01 / 03Zwei Seiten, die gleich aussehen

Schau dir diese Seite an:

<div class="kopf">
  <div class="logo">Mein Kochblog</div>
  <div class="menue">
    <div><a href="/">Start</a></div>
    <div><a href="/rezepte">Rezepte</a></div>
  </div>
</div>

<div class="inhalt">
  <div class="titel">Linsensuppe</div>
  <div class="text">Braucht 30 Minuten und hält drei Tage.</div>
</div>

<div class="fuss">Alle Rechte vorbehalten</div>

Das funktioniert. Mit ein bisschen CSS sähe es sogar gut aus. Trotzdem hat dieser Code ein Problem, das man der Seite nicht ansieht.

Für den Browser stehen dort neun identische Kisten. div bedeutet nichts. Die Klassennamen kopf, menue und titel sagen dir etwas, aber nur dir: Für den Browser sind das beliebige Zeichenketten. Er weiß nicht, dass oben die Kopfzeile ist, dass in der Mitte der Hauptinhalt steht oder dass es sich beim Titel um eine Überschrift handelt.

Jetzt dieselbe Seite mit benannten Bausteinen:

<header>
  <p>Mein Kochblog</p>
  <nav>
    <ul>
      <li><a href="/">Start</a></li>
      <li><a href="/rezepte">Rezepte</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Linsensuppe</h1>
  <p>Braucht 30 Minuten und hält drei Tage.</p>
</main>

<footer>Alle Rechte vorbehalten</footer>

Auf der Seite ändert sich fast nichts, abgesehen davon, dass Überschrift und Liste ihre Voreinstellungen mitbringen. Im Code ändert sich alles: Jetzt steht dort, was die Bereiche sind.

02 / 03Was du dadurch gewinnst

Barrierefreiheit. Das ist der stärkste Grund. Screenreader bieten eine Liste der Bereiche an, mit der man direkt zum Hauptinhalt oder zur Navigation springt. Diese Liste entsteht aus genau diesen Elementen. Bei der div-Version gibt es sie nicht, und der Nutzer hört sich bei jedem Seitenaufruf durch das komplette Menü.

Suchmaschinen. Was in main steht, ist der Inhalt der Seite. Was in nav und footer steht, wiederholt sich auf jeder Unterseite. Suchmaschinen werten das aus, und deine Überschriften-Hierarchie liest sich nur dann als Gliederung, wenn es echte Überschriften sind.

Browser-Funktionen. Der Lesemodus von Firefox und Safari rät, was auf einer Seite der Hauptinhalt ist, und article und main sind starke Hinweise darauf. Bei einer div-Suppe hat er nichts, woran er sich festhalten kann.

Lesbarkeit für dich. In sechs Monaten öffnest du die Datei wieder. <footer> verstehst du sofort. <div class="fuss"> musst du erst suchen.

03 / 03Wann ein div richtig bleibt

Semantisch heißt nicht „nie ein div“:

<article>
  <h2>Linsensuppe</h2>

  <div class="zwei-spalten">
    <p>Links steht der Text.</p>
    <p>Rechts das Bild.</p>
  </div>
</article>

Hier gruppiert das div zwei Absätze, damit CSS sie nebeneinander stellen kann. Es gibt keinen Grund, das als section auszugeben: Es ist kein eigener thematischer Abschnitt, sondern reine Verpackung fürs Layout. Genau dafür ist das div da, und dafür ist es das richtige Element.

Die Faustregel: Frag dich, ob der Bereich einen Namen hat, den HTML kennt. Kopfbereich, Navigation, Hauptinhalt, Fußbereich, Artikel, Abschnitt, Nebeninhalt. Wenn ja, nimm den. Wenn du nur etwas zusammenfassen willst, um es zu stylen, ist das div die ehrliche Wahl. Dasselbe gilt inline für span.