Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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

Steuerung
Inhalt

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.

ein wie vom Textmarker hervorgehobener Text und dann geht es 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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe