HTML-Tag<div> ... </div> ♦ Inhalte strukturieren und animieren

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. Ansonsten bringt ein div-Element keine weiteren Eigenschaft von sich aus ein.
<div>-Tags lassen sich ineinander verschachteln und bilden einen leistungsfähigen Mechanismus, 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 formatieren, positionieren oder mit JavaScript zu animieren. Dazu werden die Kernattribute class, id und style benutzt.

Zudem gibt es das <span>-Tag, das benutzt wird, wenn einer Gruppe von HTML-Elementen Stile ohne Zeilenumbruch (wie beim <div>-Tag) zugewiesen werden sollen.

Beispiel

<div id="nav" style="float: left; padding: 10px; width: 150px; background: rgb(220,230,220); border: 1px solid silver;">
    <p>erster Link</p>
    <p>zweiter Link</p>
</div>
<div id="content" style="float: left; margin-left: 15px; padding: 10px; width: 300px; border: 1px solid silver;">
    <p>Das <strong>div-Tag</strong> ist ein besonders aufregendes Konstrukt in HTML. </p>
    <p><span style="text-align: center;" id="beispiel2">Es strukturiert den Inhalt anderer Elemente, </span> <span style="text-align: right;" id="beispiel3"> die logisch zusammengehören und optisch herausgestellt werden.</span></p>
</div>

Darstellung