DIV und SPANs

Die zwei HTML-Befehle <div> und <span> werden erst durch CSS extrem nützlich. Der HTML-Befehl <div> steht für das englische „division“ in der Bedeutung „Bereich“ und ist ein Block-Element (zur Erinnerung – Block-Elemente nutzen die komplette Browserfensterbreite). Lustigerweise hat der HTML-Befehl <span> im englischen auch die Bedeutung von „Bereich“, ist aber ein Inline-Element.

Beide Elemente werden primär zum Begrenzen von Bereichen genutzt. Über die Attribute der Elemente, kann dann Design in die umschlossenen Bereiche gebracht werden. Dabei können die Elemente geschachtelt werden.

Wichtig ist zu verstehen, was der Unterschied zwischen DIV und SPAN ist:

• DIV ist ein Block-Element. Ein DIV nimmt die komplette Breite ein, sofern nichts anderes in CSS umdefiniert wurde.
• SPAN dagegen kann innerhalb eines Bereiches angewendet werden – SPAN ist ein Inline-Element.

Im folgenden Beispiel wird der Unterschied deutlicher.

Der CSS-Befehl background-color:farbe; bewirkt, dass der Hintergrund des Elements eingefärbt wird.

DIV - Einsatz

Zwei Bereiche (z. B. die Steuerung und der Inhalt) werden platziert.

<div style="background-color:red;">
  Steuerung
</div>

<div style="background-color:lawngreen;">
  Inhalt
</div>

Durch die Verwendung von DIV geht das nächste Element in der nächsten Zeile weiter - wie eine Platzierung nebeneinander erfolgen kann, kommt in einem späteren Kapitel

SPAN - Anwendung (nicht SPAM!)

Innerhalb eines Textes wird z. B. eine Hervorhebung ausgezeichnet. Als Beispiel wird in diesem Text ein Teil wie vom Textmarker hervorgehoben und dann geht es normal weiter.

ein <span style="background-color:yellow;">wie vom Textmarker 
hervorgehobener</span> Text und dann geht es normal weiter

Innerhalb der Zeile geht es nach dem SPAN-Element ganz normal weiter.

Mischen von DIVs und SPANs

Die Elemente können ineinander geschachtelt werden (egal ob SPAN oder DIV).

Im Beispiel wird das Textmarkerbeispiel erweitert, dass der Text zusätzlich noch rot wird.

ein    
  <span style="background-color:yellow;">
    wie vom 
      <span style="color:red;"> 
        Textmarker 
      </span>
    hervorgehobener   
  </span>   
Text und dann geht es normal weiter