HTML Grundlagen: Verwende div und span wie ein Profi. Eine Schritt-für-Schritt Anleitung

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

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.

Verwendung von <div> für unterschiedliche Bereiche der Webseite

<div class="bg-red black">
Navigation: 
&nbsp; 
<a href="…">
  <button type="button">
  <big>Startseite</big>
  </button>
</a>

&nbsp; 
<a href="…">
  <button type="button">
  <big>Unser Service</big>
  </button>
</a>

&nbsp; 
<a href="…">
  <button type="button">
  <big>Über uns</big>
  </button>
</a>

&nbsp; 
<a href="…">
  <button type="button">
  <big>Kontakt</big>
  </button>
</a>
</div><br>

<div class="bg-silver black">
<p>Hier steht der Inhalt der Seite</p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam.</p>

<p>Diam voluptua at vero eos et accusam et justo duo dolores 
et ea rebum. Stet clita kasd gubergren, no sea takimata 
sanctus.</p>

<p>No sea takimata, sit amet, consetetur sadipscing elitr. 
Deos Dolores consetetur sadipscing et larorum magnum. Sit 
vero eos at accusam no sea sadipscing.</p>
</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 Hervorheben auszeichnen kann.

Anwendung von <span> für Inline-Bereiche

<-- Hintergrund: rot, Text: schwarz -->
<div class="bg-red black">
Container für die Navigationsleiste <br><br>
</div>

<br>

<-- Hintergrund: silber, Text: schwarz -->
<div class="bg-silver black">
<p>
Dieses Beispiel zeigt, wie man einen Teil des Textes im Inhaltsbereich 

<-- Hintergrund: gelb, Text: schwarz, Abstand zur Seite -->
<span class="bg-yellow black mkspc">
mit einem Textmarker hervorheben
</span>
kann. Danach geht es normal weiter. <br><br>
</p>

<p>
Hier beginnt ein zweiter Absatz.
</p>
</div>