html-einfach.de

Semantisches HTML · Fehler vermeiden

„Div-Soup" vermeiden

Von Zuletzt geändert am

„Div-Soup“ (manchmal auch „Divitis“) beschreibt Markup, das fast ausschließlich aus verschachtelten <div>-Elementen besteht – eine Suppe aus Containern, in der jede Bedeutung untergegangen ist. Optisch kann so eine Seite tadellos aussehen. Im Quelltext steht dann aber nichts mehr darüber, was die einzelnen Bereiche eigentlich sind. Genau das will dieser Beitrag vermeiden helfen.

Wie Div-Soup entsteht

Selten setzt sich jemand hin und schreibt absichtlich zwanzig verschachtelte <div>. Div-Soup wächst schleichend: ein Wrapper fürs Layout, einer für den Abstand, einer fürs Styling, einer „für später“. Auch generierter Code aus manchen Buildern oder Komponenten-Bibliotheken neigt dazu. Das Ergebnis ist Markup, das ohne die CSS-Klassen vollkommen stumm ist.

<!-- Div-Soup: optisch eine Seite, semantisch ein Nichts -->
<div class="page">
  <div class="top">
    <div class="logo">…</div>
    <div class="menu">
      <div class="menu-item">…</div>
    </div>
  </div>
  <div class="main">
    <div class="post">
      <div class="post-title">Beitrag</div>
      <div class="post-body">…</div>
    </div>
  </div>
  <div class="bottom">…</div>
</div>

Dieselbe Seite, semantisch

Fast jedes <div> oben hat eine semantische Entsprechung. Tauscht man sie aus, erklärt sich die Struktur von selbst:

<header>
  <a class="logo" href="/index.html">…</a>
  <nav aria-label="Hauptnavigation">
    <ul>
      <li>…</li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Beitrag</h1>
    <p>…</p>
  </article>
</main>
<footer>…</footer>

Der Code ist nicht länger, aber ungleich aussagekräftiger. Jeder Bereich benennt jetzt seine Rolle – ganz ohne Klassennamen lesen zu müssen.

Warum Div-Soup ein Problem ist

  • Barrierefreiheit: Ohne <header>, <nav>, <main> & Co. fehlen die Landmarks, über die Screenreader-Nutzende navigieren. Eine reine <div>-Seite bietet keine Anhaltspunkte.
  • Wartbarkeit: Semantischer Code erklärt sich selbst. Bei Div-Soup musst du Klassennamen und CSS lesen, um zu verstehen, was ein Bereich sein soll.
  • Robustheit: Wer Buttons und Links aus <div> nachbaut, muss Fokus, Tastatur und Zustände mühsam mit Skripten ergänzen – fehleranfällig und überflüssig.

Randnotiz – Maschinen raten dann nur noch. Eine Seite aus lauter <div> ist nicht nur für Screenreader problematisch. Auch Web-Crawler (Suchmaschinen wie Googlebot) und KI-Crawler (z. B. GPTBot, ClaudeBot) leiten die Bedeutung von Bereichen aus den Elementen ab. Fehlt die Semantik, müssen sie aus Klassennamen und Position raten – was Hauptinhalt ist, wo die Navigation steckt, was zusammengehört. Semantisches Markup nimmt ihnen dieses Raten ab und macht Inhalte zuverlässiger auswertbar.

Div-Soup erkennen

Ein paar schnelle Prüfungen, die ich regelmäßig mache:

  1. Blende das CSS aus. Ergibt die Seite ohne Styles noch eine erkennbare Struktur (Überschriften, Listen, Bereiche)? Wenn alles zu einem grauen Brei zerfällt, fehlt Semantik.
  2. Schau auf die Landmarks. Gibt es genau ein <main>, ein <header>, ein <nav>? Mit einer Landmarks-Erweiterung im Browser ist das in Sekunden geprüft.
  3. Zähle die Verschachtelung. Drei, vier <div> ineinander, nur um Abstände zu setzen, sind ein Warnsignal.
  4. Suche klickbare <div>. Sie gehören fast immer durch <button> oder <a> ersetzt.

So räumst du auf

Du musst nicht alles auf einmal umbauen. Mein pragmatischer Weg:

  • Setze zuerst die vier Struktur-Elemente (header, nav, main, footer).
  • Ersetze klickbare <div> durch <button>/<a>.
  • Mach aus „gemalten“ Aufzählungen echte Listen.
  • Prüfe bei jedem verbleibenden <div>, ob nicht doch ein semantisches Element passt – und lass es stehen, wenn es wirklich nur ums Layout geht.

Häufige Fragen

Sind <div> also grundsätzlich schlecht?

Nein. <div> ist für reine Layout-Container genau richtig. Das Problem ist nicht das Element, sondern sein Einsatz anstelle vorhandener Semantik. Die Abgrenzung klärt div vs. span.

Muss ich bestehende Projekte komplett umschreiben?

Nicht zwingend. Schon das Setzen der Struktur-Elemente und das Ersetzen klickbarer <div> bringt den größten Gewinn. Den Rest kannst du nach und nach aufräumen.

Fazit

Div-Soup ist kein optisches, sondern ein bedeutungsbezogenes Problem: Der Code sagt nicht mehr, was er enthält. Die Lösung ist unspektakulär – vorhandene semantische Elemente nutzen und <div> auf das beschränken, was es ist: ein neutraler Container. Das Fundament dazu liefert Was ist semantisches HTML?.