DIV vs. SPAN – was ist der Unterschied?
Die beiden HTML Tags DIV und SPAN werden erst durch CSS wirklich nützlich. Beide HTML Elemente werden hauptsächlich benutzt, um Bereiche zu definieren. Wichtig ist, dass du verstehst, was der genaue Unterschied zwischen <div> und <span> ist.
-
DIV (für Englisch: Division) ist ein Block-Element und definiert einen Bereich oder anders ausgedrückt einen Container für Inhalt. Wenn mit CSS nichts anderes festgelegt wird, nehmen DIV-Elemente die gesamte zur Verfügung stehende Breite ein.
-
SPAN ist im Gegensatz zum DIV ein Inline-Element, das in einem DIV-Container enthalten sein kann.
Das Besondere an diesen beiden HTML-Elementen ist, dass sie keine semantische Bedeutung haben. Ein DIV wird benutzt, um Bereiche auf der Webseite zu definieren und zu formatieren. Im Gegensatz dazu wird SPAN benutzt, um Text zu formatieren, ohne den normalen Textfluss zu unterbrechen.
Beachte:Inline Elemente müssen immer in einem Block-Element platziert werden und dürfen keine Block-Elemente enthalten.
DIV Container dürfen weitere DIV-Container und andere Inline-Elemente und Block-Elemente enthalten.
SPAN-Container dürfen nur weitere Inline-Elemente enthalten. Sie werden vor allem benutzt, um für bestimmte Textstellen eine andere Schriftgröße, Schriftfarbe oder Hintergrundfarbe zu definieren.
Die HTML Tags DIV und SPAN können verschachtelt werden
Die HTML-Elemente DIV und SPAN können verschachtelt werden. In einem SPAN-Element darf kein DIV-Element liegen. Beide HTML-Elemente haben keine inhaltliche Struktur oder beschreiben eine bestimmte Form von Datenelement. Einfach ausgedrückt sind sie Container, die mit beliebigem Inhalt gefüllt werden können.
Anwendung von DIV
Früher wurden fast alle Webseiten mit Layouttabellen erstellt. Dabei handelte es sich um gewöhnliche HTML-Tabellen, in denen verschiedene Bereiche der Webseite positioniert wurden. Solche Tabellen waren sehr sperrig und es war in der Regel notwendig, eine große Anzahl von Tabellen ineinander zu verschachteln. Die Folge war, dass der HTML-Code unnötig aufgebläht wurde und das Layout immer nur für eine bestimmte Bildschirmauflösung erstellt werden konnte.
Heute wird fast nur noch Responsive Web-Design verwendet. Responsive Layouts können sich automatisch an verschiedene Bildschirmauflösungen anpassen. Die Bereiche der Webseite werden dabei jeweils durch DIV-Container oder sinnvolle semantische HTML-Elemente realisiert, die die Inhalte der Webseite aufnehmen.
Moderne Webseiten werden heute sehr oft auf der Basis von CSS-Grid und/oder Flexbox entwickelt.
Das folgende Beispiel demonstriert die Verwendung von DIVs für unterschiedliche Bereiche (z.B. Navigation und Inhalt), die mit je einem DIV realisiert werden.
<div class="BGrd blk">
Navigationsleiste
</div>
<div class="BGslvr blk">
Inhalt
</div>Dieser Hintergrund repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.
Da das HTML DIV-Tag ein Block-Element ist, nimmt der Bereich die gesamte zur Verfügung stehende Breite ein und beginnt in einer neuen Zeile. Wie man zwei DIV-Container mit CSS nebeneinander positioniert, wird im Abschnitt DIV-Elemente nebeneinander positionieren beschrieben.
Anwendung von SPAN
Das folgende Beispiel demonstriert, wie man Text durch Hervorheben auszeichnen kann.
Beispiel<-- Hintergrund: rot, Text: schwarz -->
<div class="BGrd blk">
Navigationsleiste
</div>
<-- Hintergrund: silber, Text: schwarz -->
<div class="BGslvr blk">
<p>
Dieses Beispiel zeigt, wie man einen Teil des Textes im Inhaltsbereich
<-- Hintergrund: gelb, Text: schwarz, Abstand zur Seite -->
<span class="BGyl blk mkspc">
wie mit einem Textmarker hervorheben
</span>
kann. Danach geht es normal weiter.
</p>
<p>
Hier beginnt ein zweiter Absatz.
</p>
</div>Dieses Beispiel zeigt, wie man einen Teil des Textes im Inhaltsbereich wie mit einem Textmarker hervorheben kann. Danach geht es normal weiter.
Hier beginnt ein zweiter Absatz.
Dieser Hintergrund repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.