HTML Grundlagen: Verwende div und span wie ein Profi – Finde heraus, was die Unterschiede sind

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.

1. Das 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.

2. 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 positionieren und zu formatieren. Im Gegensatz dazu wird SPAN hauptsächlich benutzt, um Text zu formatieren, ohne dass der normale Textfluss dadurch unterbrochen wird.

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 und Block-Elemente enthalten. Ein SPAN-Container darf im Gegensatz dazu nur weitere Inline Elemente enthalten.

SPAN-Container werden hauptsächlich benutzt, um für bestimmte Textstellen eine andere Schriftart, 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 aber kein DIV-Element liegen. Die Elemente DIV und SPAN sind leere Elemente, die keine inhaltliche Struktur oder eine spezielle Form von Daten Element beschreiben. Einfach ausgedrückt sind sie Container, die mit irgendeinem 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 einzelnen Zeilen und Spalten der Webseite ihre Position zugewiesen bekamen. 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 war immer nur für eine bestimmte Bildschirmauflösung brauchbar.

Heute werden fast nur noch responsive Web-Designs verwendet, da diese Layouts sich automatisch an verschiedene Bildschirmgrößen anpassen. Die einzelnen Bereiche der Webseiten werden jetzt durch DIV Container oder sinnvolle semantische Elemente realisiert. Diese Elemente nehmen die , verschiedenen Inhalte auf.

<div class="BGrd blk">
Navigationsleiste
</div>
<div class="BGslvr blk">
Inhalt
</div>

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.

<-- 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>