Das div-Element ist ein Behälter ohne eigene Bedeutung. Es gliedert für die Gestaltung, ohne etwas über den Inhalt auszusagen. Diese Bedeutungslosigkeit ist kein Mangel, sondern der Zweck – sie wird nur oft an der falschen Stelle genutzt.

Wann ein div richtig ist

Immer dann, wenn eine Gruppierung nur aus Gestaltungsgründen nötig ist und kein passendes Element existiert:

<div class="raster">
  <article>…</article>
  <article>…</article>
  <article>…</article>
</div>

Der Behälter ordnet drei Beiträge in einem Raster an. Er behauptet nichts über sie – die Aussage steckt in den article-Elementen.

Wann ein anderes Element besser ist

Bevor ein div gesetzt wird, lohnt eine kurze Prüfung. Für die häufigsten Fälle gibt es Elemente, die dasselbe leisten und zusätzlich Bedeutung tragen:

  • Navigation → nav
  • Kopf- oder Fußbereich eines Abschnitts → header, footer
  • Eigenständiger Beitrag → article
  • Thematischer Abschnitt mit Überschrift → section
  • Nebeninhalt, Randspalte → aside
  • Anklickbares Bedienelement → button
  • Bild mit Bildunterschrift → figure und figcaption

Der teuerste Fehlgriff

Ein div mit Klickbehandlung als Ersatz für eine Schaltfläche:

<!-- so nicht -->
<div class="button" onclick="senden()">Absenden</div>

<!-- so -->
<button type="button" onclick="senden()">Absenden</button>

Die erste Fassung ist mit der Tastatur nicht erreichbar, bekommt keinen Fokus, reagiert nicht auf Eingabe- und Leertaste und wird vom Screenreader nicht als Schaltfläche angesagt. Alles davon müsste mit tabindex, role und Tastaturbehandlung nachgebaut werden. Das echte button-Element bringt es mit.

Wie viele sind zu viele?

Eine feste Zahl gibt es nicht, aber einen brauchbaren Test: Blenden Sie das gesamte CSS aus. Bleibt die Seite in ihrer Gliederung lesbar – Überschriften, Absätze, Listen in sinnvoller Folge –, ist die Struktur in Ordnung. Zerfällt sie in eine gleichförmige Textmasse, tragen die Behälter und ihre Klassen die Struktur. Für Screenreader und Suchmaschinen ist sie dann nicht vorhanden.

Praktischer Nebeneffekt: Weniger verschachtelte Behälter machen CSS einfacher. Jede Ebene ist eine zusätzliche Stelle, an der Abstände und Höhen weitergereicht werden.