div vs. span – wann nutze ich was?

<div> und <span> sind die beiden bedeutungslosen Elemente in HTML – und genau das ist ihr Zweck. Sie tragen keine Semantik, sondern dienen als neutrale Hülle zum Gruppieren und Gestalten. Die eigentliche Kunst liegt nicht darin, sie zu meiden, sondern zu wissen, wann sie die richtige Wahl sind und wann ein semantisches Element gehört.

Der eine technische Unterschied

• <div> ist ein Block-Element: Es beginnt auf einer neuen Zeile und nimmt standardmäßig die volle Breite ein. Ideal, um größere Bereiche oder mehrere Elemente zu gruppieren.
• <span> ist ein Inline-Element: Es bleibt im Textfluss. Ideal, um einen Teil innerhalb einer Zeile anzufassen – etwa ein einzelnes Wort.

<!-- div: gruppiert einen Block, z. B. für ein Layout-Raster -->
<div class="karten-raster">
  <article>…</article>
  <article>…</article>
</div>

<!-- span: fasst einen Ausschnitt im Text an, z. B. zum Einfärben -->
<p>Status: <span class="badge">aktiv</span></p>

Beide sind semantisch neutral

Das ist der entscheidende Punkt: Weder <div> noch <span> sagen etwas über die Bedeutung ihres Inhalts aus. Für einen Screenreader oder einen Crawler sind sie „durchsichtig“. Deshalb sind sie die letzte Wahl – immer dann, wenn kein passendes semantisches Element existiert.

Meine persönliche Reihenfolge im Kopf: Gibt es ein semantisches Element (<nav>, <article>, <button>, <ul> …)? Wenn ja, nehme ich das. Erst wenn es wirklich nur ums Gruppieren oder Stylen geht, kommt <div> oder <span>.

Wann <div>/<span> richtig sind

Diese Fälle sind völlig legitim:

• Ein Layout-Wrapper, um mehrere Elemente per CSS Grid oder Flexbox anzuordnen.
• Ein Hook fürs Styling, wenn es keine inhaltliche Bedeutung gibt.
• Ein Inline-Ausschnitt (<span>), um ein Wort einzufärben oder per Skript anzusteuern.

<!-- Korrekt: reiner Layout-Container -->
<div class="zwei-spalten">
  <main>…</main>
  <aside>…</aside>
</div>

Wann ein semantisches Element gehört

Hier wird <div> oder <span> zum Fehler, weil es eine passende Alternative gibt:

<!-- Falsch: klickbares div -->
<div class="button" onclick="…">Senden</div>

<!-- Richtig: echter Button (fokussierbar, tastaturbedienbar) -->
<button type="button">Senden</button>

<!-- Falsch: div als Navigation -->
<div class="nav">…</div>

<!-- Richtig: nav mit Liste -->
<nav aria-label="Hauptnavigation">
  <ul>
    …
  </ul>
</nav>

Ein nachgebauter <div>-Button ist das klassische Beispiel: Er ist weder fokussierbar noch reagiert er auf Tastatur – Eigenschaften, die ein <button> gratis mitbringt. Mehr dazu unter Buttons vs. Links.

Randnotiz – warum das auch für Maschinen zählt. Ob ein Bereich eine Navigation, ein Beitrag oder nur ein Layout-Kasten ist, erschließt sich Web-Crawlern (Suchmaschinen) und KI-Crawlern (z. B. GPTBot, ClaudeBot) allein aus dem Element. Eine Seite, die alles in <div> verpackt, zwingt Software zum Raten. Semantische Elemente machen die Rolle dagegen eindeutig – ein Vorteil, der weit über Screenreader hinausgeht.

Häufige Fehler

• Klickbare <div> statt <button> oder <a>.
• <div> als Navigation, Liste oder Artikel, obwohl es passende Elemente gibt.
• <span> für ganze Blöcke (es ist ein Inline-Element).
• Verschachtelte <div>-Türme, wo wenige semantische Elemente reichen würden – siehe „Div-Soup“ vermeiden.

Häufige Fragen

Ist es schlimm, viele <div> zu verwenden?

Nicht per se. Layouts brauchen Container. Problematisch wird es erst, wenn <div> anstelle vorhandener semantischer Elemente steht. Auf die Verhältnismäßigkeit kommt es an.

<div> oder <span> – die schnelle Entscheidung?

Block oder Inline? Geht es um einen Bereich, der auf eigener Zeile steht, ist <div> richtig. Geht es um einen Ausschnitt innerhalb einer Textzeile, nimm <span>.

Fazit

<div> und <span> sind nützliche, neutrale Werkzeuge – <div> für Blöcke, <span> für Inline-Ausschnitte. Sie sind die richtige Wahl, wenn es keine semantische Alternative gibt, und die falsche, wenn doch. Halte sie als letzte Option im Hinterkopf, dann vermeidest du fast automatisch die „Div-Soup“.