HTML Grundlagen: Was ist der Unterschied zwischen <div> und <span>?

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 begrenzen. Wichtig ist, dass Du verstehst, was der Unterschied zwischen <div> und <span> ist.

1. Ein DIV (div für Englisch »division« Bereich = Bereich) ist ein Block-Element. Wenn mit CSS nichts anderes definiert wurde, nimmt es die volle verfügbare Breite ein.

2. Im Gegensatz zum DIV ist ein SPAN (English »span« = Spanne)ein Inline Element und kann innerhalb eines DIV verwendet werden.

Das Besondere an den beiden HTML Tags DIV und SPAN ist, dass sie keine semantische Bedeutung haben. Ein DIV wird eher benutzt, um Bereiche der Webseite oder des Layouts zu positionieren. Im Gegensatz dazu wird ein SPAN hauptsächlich benutzt, um Text zu formatieren, ohne dass dadurch der normale Textfluss unterbrochen wird.

Beachte: Inline Elemente müssen immer in Block Elementen platziert werden und dürfen keine Block Elemente enthalten.

Ein DIV Container darf weitere DIV Container und andere Inline und Block Elemente enthalten. Ein SPAN Container darf im Gegensatz dazu nur weitere Inline Elemente enthalten.

Ein SPAN Container wird üblicherweise benutzt, um für bestimmte Textstellen eine andere Schriftart, Schriftgröße, Textfarbe oder Hintergrundfarbe zu benutzen.

Die HTML Tags DIV und SPAN können verschachtelt werden

Die Elemente DIV und SPAN können ineinander geschachtelt werden. Innerhalb eines SPAN Elements darf aber kein DIV Element liegen. Die Elemente DIV und SPAN sind leere Elemente, denn sie beschreiben weder eine inhaltliche Struktur noch eine spezielle Form von Daten Element. Einfach ausgedrückt sind sie Container, die mit irgendetwas gefüllt werden können.

Anwendung von DIVFrüher wurden fast alle Webseiten durch eine Layout-Tabelle realisiert. Diese Layout-Tabelle war eine gewöhnliche Tabelle, in der die einzelnen Zeilen und Spalten der Webseite ihren Platz zugewiesen bekamen. Da solche Tabellen sehr sperrig waren und häufig viele Tabellen ineinander verschachtelt werden mussten, war der HTML Code unnötig aufgeblasen und das Layout nur für eine bestimmte Video-Auflösung zu gebrauchen.

Heute werden  responsive Web-Designs  verwendet, die sich automatisch an verschiedene Bildschirmgrößen anpassen. Die einzelnen Bereiche der Webseite werden jetzt durch DIV Container realisiert, die die verschiedenen Inhalte aufnehmen.

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 zwei DIV Container nebeneinander platziert werden können, wird im Abschnitt CSS Grundlagen beschrieben.

Anwendung von SPANDas folgende Beispiel demonstriert, wie man  Text durch Hervorhebung auszeichnen  kann.