In diesem Block lernst du, wie man eine ganze Webseite sinnvoll strukturiert - nicht nur einzelne Elemente wie Überschriften oder Listen, sondern die großen Baubereiche einer Seite: Kopfbereich, Navigation, Hauptinhalt, Fußbereich.

<div>: die Allzweck-Box

<div> ("division", also "Bereich") ist ein Element, das absolut keine eigene Bedeutung hat - es ist einfach ein rechteckiger Bereich, in den man andere Elemente packen kann:

<div>
  <h2>Über mich</h2>
  <p>Hallo, ich bin Finn!</p>
</div>

Wenn du das im Browser anschaust, siehst du: Optisch verändert das <div> erst einmal gar nichts. Es gruppiert nur Elemente logisch zusammen - nützlich, wenn man diese Gruppe später zum Beispiel mit CSS gemeinsam gestalten möchte.

<span>: dieselbe Idee, aber für Text

<span> ist das Gegenstück zu <div>, aber für innerhalb eines Textes, nicht für ganze Blöcke:

<p>Mein Lieblingsspieler ist <span>Spieler A</span>.</p>

Auch <span> hat für sich genommen keine besondere Bedeutung - genau wie <div> ist es nur ein neutraler "Behälter", diesmal für ein einzelnes Wort oder einen kurzen Textabschnitt statt für einen ganzen Block.

Das eigentliche Problem: keine Bedeutung

Stell dir vor, du baust eine ganze Webseite nur aus <div>-Elementen:

<div><!-- Kopfbereich -->
  <h1>Finns Fußball-Webseite</h1>
</div>
<div><!-- Navigation -->
  <a href="index.html">Start</a>
</div>
<div><!-- Hauptinhalt -->
  <p>Willkommen!</p>
</div>

Diese Seite funktioniert technisch - der Browser zeigt sie an. Aber für einen Screenreader, eine Suchmaschine, oder einfach für einen Menschen, der später deinen Code liest, sieht jedes dieser <div> exakt gleich aus: nur "irgendein Bereich". Es gibt keinen Unterschied zwischen dem Bereich mit der Navigation und dem Bereich mit dem Hauptinhalt - obwohl das für einen Menschen offensichtlich ist, weiß der Computer es nicht, ohne dass wir das Kommentare wie <!-- Navigation --> nutzen, die aber (wie du aus Kapitel 5 weißt) komplett unsichtbar für alle Werkzeuge sind, die die Seite auswerten.

Wann man div und span trotzdem benutzt

<div> und <span> sind nicht "falsch" oder überholt - man benutzt sie einfach genau dann, wenn es kein passenderes, bedeutungsvolleres Element gibt. Für die großen Grundbereiche einer Seite gibt es aber, wie du gleich siehst, fast immer eine bessere, semantische Alternative.