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 und keine semantische Bedeutung, 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 sind 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

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

Mit HTML5 kommt ein ganzer Schwung von neuen Struktur-Objekten wie HTML header und footer, so dass sich die Rolle des div-Elements auf die Darstellung und die Identifizierung von Blöcken mit Javascript beschränkt. In HTML5 soll das HTML div zum letzten Ausweg werden, wenn kein anderes HTML-Element explizit zur Verfügung steht.

Von XHTML nach HTML5

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.

Die HTML5-Tags sind aufgrund ihrer semantischen Bedeutung aussagekräftiger.

<section>
    <header> HEADER </header>
    <nav>
        <ul>
            <li>Erster Link</li>
            <li>Zweiter Link</li>
        </ul>
    </nav>
    <article>  …  </article>
    <footer> FOOTER </footer>
</section>