Cascading Stylesheets – Zur Startseite Cascading Stylesheets Stil mit <Stil>

div ♦ <div> ... </div> ♦ IE4+ M1 N6 O5+ ♦ HTML 3.2, 4.0

Das <div>-Tag ist ein Container für mehrere HTML-Elemente, denen durch die Kernattribute des <div>-Tags Stylesheet-Eigenschaften zugewiesen werden. div-Elemente sind Blockelemente, da das öffnende und das schließende <div>-Tag jeweils zu Zeilenumbrüchen – äquivalent zum <br>-Tag – führen. <div>-Tags können ineinander verschachtelt werden und bilden einen leistungsfähigen Steuerungsmechanismus, mit dem jeder Bereich einer Webseite erreicht werden kann.

In erster Linie wird das <div>-Tag dazu herangezogen, eine Menge von logisch zusammengehörigen HTML-Elementen mit der Hilfe von Cascading Stylesheets zu positionieren oder mit JavaScript zu animieren. Dazu werden die Kernattribute class und style benutzt.

Äquivalent zum <div>-Tag gibt es noch das <span>-Tag, das benutzt wird, wenn einer Gruppe von HTML-Elementen Inlinestile – also Stile ohne Zeilenumbruch – zugewiesen werden sollen.

Das schließende Tag ist optional. Allerdings ist es fast immer empfehlenswert, das schließende Tag zu setzen.

Kernattribute class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title
align unerwünscht 4.0 Das Attribut align steuert die horizontale Ausrichtung des Inhalts des <div>-Tags. Die möglichen Werte sind center, justify, left und right. Mit HTML 4.0 wurde dieses Attribut als "unerwünscht" gekennzeichnet, obwohl die meisten Browser das Attribut noch erkennen. Anstelle des Attributs align sollte ein Stylesheet benutzt werden.

Beispiel

<div style="text-align: left;" id="beispiel1">
  Das <b>div-Tag</b> ist ein besonders 
  aufregendes Konstrukt in HTML.
</div>
<div style="text-align: center;" id="beispiel2"> 
  Es strukturiert den Inhalt 
  anderer Elemente, 
</div>
<div style="text-align: right;" id="beispiel3"> 
  die logisch zusammengehören und 
  optisch herausgestellt werden.
</div>

Darstellung

Das div-Tag ist ein besonders aufregendes Konstrukt in HTML.
Es strukturiert den Inhalt anderer Elemente,
die logisch zusammengehören und optisch herausgestellt werden.

↑

 

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen