HTML div • Positionieren und Animieren

HTML DIV-Tag: Positionieren von Sidebars und Slideshows, Anker für Animationen

HTML div ist ein Behälter für weitere HTML-Elemente. div hat keine eigenen Eigenschaften und keine semantische Bedeutung, sondern dient als Basis für die Positionierung und Animation von HTML-Bereichen.

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

Mit HTML4 und XHTML war das div-Tag der Hans-Dampf-in-allen-Gassen. Mit HTML5 endet die tragende Aufgabe des div-Tags. In der HTML5-Spezifikation / Grouping Content (Okt 2014) heißt es sinngemäß:

Das div-Element ist die Zuflucht, wenn kein anderes Element (header, section, article, nav, aside …) passt.

Von XHTML nach HTML5

In XHMTL liegen Seitenkopf, Navigationsleiste, der Block der Inhalte und der Seitenfuß einer HTML-Seite meist 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>

Rolle des div-Tags in HTML5

Der intensive Einsatz des div-Tags – oft mit einer langen Liste von CSS-Klassen – erschwert die Pflege des Dokuments und mindert die Zugreifbarkeit.

Mit HTML5 kommt ein Schwung neuer Struktur-Objekte wie HTML header und footer, so dass sich die Rolle des div-Tags auf den Transport von CSS und die Identifizierung von Blöcken mit Javascript beschränkt. In HTML5 soll HTML div der letzte Ausweg sein, wenn kein semantische HTML-Element ausdrücklich zur Verfügung steht.

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

Aussterben wird das div-Element aber nicht. div-Tags können jede Art von Inhalt aufnehmen, lassen sich ineinander verschachteln und bilden auch weiterhin einen leistungsfähigen Mechanismus, der jeden Bereich einer Webseite erreicht. In erster Linie wird HTML div 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.

Mehr zu »HTML-Dokuemnt strukturieren