Stil mit {stil}

Apr 2008

HTML-Tag div • Formatieren, Positionieren und Animeren von HTML-Elementen

Seitenkopf, Navigationsleiste, der Block der Inhalte und der Seitenfuß einer HTML-Seite liegen fast immer in div-Tags, die für die Positionierung und Formatierung der HTML-Seite herangezogen werden.

Das <div>-Tag ist ein Behälter für weitere HTML-Elemente. Das öffnende und schließende <div>-Tag führen jeweils zu Zeilenumbrüchen – div-Tags bilden Block-Elemente. Ein div-Element bringt keine weiteren Eigenschaften mit und ohne Inhalte nimmt ein DIV-Element ohne Höhen- und Breitenangaben durch CSS-Regeln keinen Platz im HTML-Dokument 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 herangezogen, logisch zusammengehörige HTML-Elemente mit Hilfe von CSS zu formatieren, zu positionieren oder mit JavaScript zu animieren. Dazu werden die Kernattribute class, id und style benutzt.

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

Beispiel

<div id="box1" style="float: left; width: 150px; background: rgb(220,230,220);">
   <p>erster Link</p>
   <p>zweiter Link</p>
</div>
<div id="box2" style="float: left; margin-left: 15px; border: 1px solid silver; ">
   <p>Das <strong>div-Tag</strong> ist ein besonders nützliches Konstrukt in HTML. </p>
   <p>Es strukturiert Inhalte, die logisch zusammengehören 
   und optisch herausgestellt werden.</p>
</div>

Die ersten beiden div-Elemente gruppieren eine Reihe von weiteren Elementen wie Links für eine Navigation und die eigentlichen Inhalte einer Seite. Zusätzlich bringen sie eigene Stile wie Hintergrundfarbe und Rahmen, um die Gruppierung im Browserfenster hervorzuheben.

Die span-Elemente innerhalb der div-Elemente transportieren Stile in Teile der Inhalte.

Darstellung

Kernattribute und Ereignisse für div-Elemente

Zum Seitenanfang