(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:
  1. Einführung
  2. 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.“

« So, mich gibts jetzt auch bei Twitter     Kleine Blogpause wegen Umzug und neuem Job »

 

Kommentare geschlossen.

Some rights reserved 2005-2017  Moritz Gießmann
Die Inhalte (Texte / Fotos) des Weblogs werden, sofern nicht anders angegeben, unter der Creative Commons Lizenz veröffentlicht.
http://www.dead-pixel.de läuft mit WordPress