Apr 2008

HTML div • Formatieren, Positionieren und Animieren von HTML-Elementen

HTML div ist ein Behälter für weitere HTML-Elemente. Ein div-Element hat keine eigenen Eigenschaften, sondern stellt nur die Verpackung für seine Kind-Objekte.

Ohne Inhalte und Höhen- und Breitenangabe nimmt ein DIV-Element keinen Platz im HTML-Dokument ein, aber das öffnende und schließende div-Tag führen jeweils zu Zeilenumbrüchen – div-Tags bilden Block-Elemente.

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 benutzt, um

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.

Rolle des div-Tags in HTML5

Mit HTML5 kommt ein ganzer Schwung von neuen Struktur-Objekten wie HTML header und footer, so dass die Bedeutung von div für das Layout der Seite abnehmen wird. In HTML5 soll das HTML div zum letzten Ausweg werden, wenn kein anderes HTML-Element explizit zur Verfügung steht.

Der intensive Einsatz des div-Tags erschwert die Pflege des Dokuments und mindert die Zugreifbarkeit.

Beispiel

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

<style type="text/css" title="text/css">
div#wrap   { width: 600px; }
div#header { background: blue; }
…
</style>
…
<div id="wrap">
   <div id="header"> HEADER </div>
   <div id="nav">
      <ul>
         <li>Erster Link</li>
         <li>Zweiter Link</li>
      </ul>
   </div>
   <div id="main">  …  </div>
   <div id="footer"> FOOTER </div>
</div>

div-Elemente gruppieren weitere Elemente wie Links für eine Navigation und den Inhalt der Webseite. Zusätzlich stellen div-Tags durch CSS-Stile wie Hintergrundfarbe und Rahmen die Gruppierung im Browserfenster heraus.

HEADER
  • Erster Link
  • Zweiter Link

Das div-Tag ist ein nützlicher Mechanismus in HTML.

Es gruppiert Elemente, die logisch zusammengehören und stellt sie optisch heraus.

FOOTER

HTML div-Tag – Attribute und Ereignisse

KernattributeEreignisse
class, dir, id, lang, style, title