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.
-
Im Gegensatz zum div ist span ein Inline-Element, das in einem div-Container verwendet werden kann.
Das Besondere an diesen beiden HTML-Elementen ist, dass sie keine semantische Bedeutung haben. Ein div wird eher 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 hauptsächlich 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 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 einer Layout-Tabelle erstellt. Diese Layout-Tabellen waren gewöhnliche Tabellen, in denen die verschiedenen Bereiche der Webseite positioniert wurden. Solche Tabellen waren sehr sperrig und es mussten in der Regel viele Tabellen ineinander geschachtelt werden. Dadurch wurde der HTML-Code unnötig aufgebläht und das Layout wurde immer nur für eine bestimmte Bildschirmauflösung erstellt.
Heute werden fast nur noch responsive Web-Designs verwendet, da diese Layouts sich automatisch an verschiedene Bildschirmgrößen anpassen können. Die einzelnen Bereiche der Webseiten werden jetzt durch DIV Container oder sinnvolle semantische Elemente realisiert, die die Inhalte aufnehmen.
Moderne Webseiten werden heute häufig auf der Basis von CSS-Grid und 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 Hervorhebung 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.