(X)HTML Tags und ihre semantische Bedeutung: Teil 2 neutrale Elemente div und span
Die eigentliche Serie werde ich mit den allgemeinen Elementen <div> und <span> beginnen, die eigentlich keine semantische Bedeutung haben und daher zu reinen Layoutzwecken eingesetzt werden sollten.
Teile der Serie:
- Einführung
- Neutrale Elemente <div> und <span>
Das <div> Element
Das <div> (div = division = Bereich) Tag steht semantisch gesehen für einen allgemeinen Bereich, der mit CSS formatiert werden kann. Ein <div> erzeugt, sofern nicht durch eine CSS Angabe verhindert, einen neuen Absatz und ist daher Teil der Blockelemente in HTML. Es darf aber auch andere Blockelemente umschließen. (Erklärung Inline/Block auf Selfhtml).
<div> Elemente werden oft zur Strukturierung und Ausrichtung der groben Seitenbereiche (Rahmen/Kopf/Inhalt/Fuß/Sidebar) eingesetzt.
Einsatzbeispiel <div>
<div class="rahmen">
<div class="header">Inhalt des Kopfes</div>
<div class="content">Eigentlicher Inhalt</div>
<div class="sidebar">Inhalt der Sidebar</div>
<div class="footer">Inhalt des Footers</div>
</div>
Die hier vergebenen Klassen wie z.B. header können per CSS formatiert werden.
Das <span> Element
Das <span> (span = Spanne, Bereich) Element bezeichnet einen allgemeinen inline Bereich, was heißt, dass mit <span> einzelne Teile eines Textes innerhalb eines Blockelements, wie z.B. <p> nochmal extra (mit CSS) formatiert werden können. Ein inline Element wie <span> erzeugt keinen neuen Absatz und kann somit innerhalb von Texten, oder auch für einzelne Buchstaben eingesetzt werden.
Einsatzbeispiel <span>
<span style="color:red">Roter</span> Text,
<span style="color:blue">blauer</span> Text,
<span style="color:green">grüner</span> Text.
Das obige Beispiel sieht folgendermaßen aus:Roter Text, blauer Text, grüner Text.
Im nächsten Teil der Serie werde ich mich mit sematischen Hervorhebungen für Texte beschäftigen.
Diese Serie wird nicht fortgesetzt. Die im Netz frei verfügbaren Referenzen zu HTML sind erschöpfend und eine weitere würde nur Verwirrung stiften. Wer weiterführende Informationen zu HTML-Elementen sucht, dem sei Michael Jendryschiks „Einführung in XHTML und CSS empfohlen.“