HTML DIV’s und Span’s – Die Blockelemente

Neben den HTML Befehlen für Textformatierung und Auszeichnung von Tabellen und Listen, gibt es in HTML auch sogenannte Blöcke. Mit den HTML Blöcken werden Elemente der Website an die richtige Stelle gelegt und mit CSS dann designed.

Früher wurden Websites in einem Tabellenlayout entworfen. Davon möchte ich dir heutzutage dringend abraten. Diese Methode ist mehr als nur veraltet und müllt den Quellcode unserer Website einfach nur voll. Der Befehl für Tabellen in HTML sollte daher auch nur für Tabellen genutzt werden.

Der HTML DIV Befehl

Der Befehl <div></div> steht für division, also einem Bereich in HTML. Bei dem <div></div> sprechen Webentwickler von einem allgemeinen Blockelement. Der Vorteil des DIVs ist, dass dieses beliebig oft verschachtelt werden kann. Der erste DIV im HTML Quellcode ist das sogenannte Eltern-Element. Der nächste DIV das Kind-Element, sofern es im Eltern-Element verschachtelt wurde.

Dem DIV-Element wird oft das id/class -Attribut zugewiesen, welches sich dann mit Hilfe von CSS selektieren und designen lässt.

Der HTML SPAN Befehl

Der <span></span>-Befehl wird ebenso wie der <div></div>-Befehl zur Kennzeichnung von Bereichen genutzt. Hierbei handelt es sich aber um kein allgemeines Blockelement wie beim <div></div>, sondern um ein Inline Blockelement. Das bedeutet, dass der <span></span>-Befehl keine sofortige Veränderung mit sich bringt.

Er sorgt für keinen Zeilenumbruch und auch sonst, sieht alles normal aus. Aber wofür nutzt man nun den <span></span>-Befehl? Unter anderem wird es gerne für die Formatierung von Text genutzt. Man kann mit einfachen CSS-Befehlen den Text markieren und anders darstellen, als der eigentliche Fließtext.