HTML - Elemente - <div> und <span>

1. Etwas Besonderes

Diese beiden HTML-Elemente stellen eine Sonderform innerhalb von (X)HTML dar. Sie beschreiben weder eine inhaltliche Struktur noch eine spezielle Form von Datenelementen. Sie sind, einfach gesagt, leere Elemente, die man mit irgendwas füllen kann. Der einzige Unterschied besteht darin, dass <div> zu den Block- und <span> zu den Inline-Elementen gehört.

2. <div>

Mit diesem Element kann man ein HTML-Dokument in unterschiedliche Abschnitte aufteilen. Da es sich dabei um ein Block-Element handelt, ist es hervorragend dazu geeignet, mittels CSS verschiedene "Rubriken" zu definieren. Durch entsprechende Strukturierung kann man so ein HTML-Dokument aufbauen, ohne auf die vormals so beliebten Layout-Tabellen zurückgreifen zu müssen.

Allerdings sollte man dieses Element nicht für jeden Blödsinn, bzw. jedes Element benutzen (Stichwort: Div-Suppe). Man muss sich das ungefähr so vorstellen wie zu den Zeiten, als Frames noch gang und gäbe waren. Wir haben zum Beispiel einen Abschnitt mit den Hauptnavigationspunkten, einen Bereich mit dem Untermenü, dem Inhalt, Zusatzinformationen und einer Abschlussleiste. Das Ganze soll dann in einen festgelegten Rahmen gepresst werden. Der Code sähe dann ungefähr so aus:

<div class="rahmen">
  <div class="navitop">
    ... Alle Hauptpunkte ...
  </div>
  <div class="navisub">
    ... Alle Unterpunkte ...
  </div>
  <div class="inhalt">
    ... Inhalt
  </div>
  <div class="info">
    ... Zusatzinfos
  </div>
  <div class="unten">
    ... unterer abschluss
  </div>
</div>

3. <span>

Dieses Element sollte man nutzen, um innerhalb eines bestehenden Textflusses bestimmte Elemente zu formatieren. Normalerweise handelt es sich dabei um Abschnitte innerhalb eines Textes, die auf eine bestimmte Art formatiert werden sollen, obwohl sie keine spezielle inhaltliche Bedeutung haben, die mit HTML beschrieben werden können.

Ein Beispiel soll dies erläutern. Wir haben stinknormalen Fließtext, in dessen Verlauf wir einen bestimmten Bereich zusätzlich formatieren wollen. Das könnte dann so aussehen.

Hier haben wir stinknormalen Fliesstext,
in dessen Verlauf wir irgendetwas auszeichnen
wollen, <span>und dieser Text kommt hier</span>.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt