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 das Positionieren, für Effekte und die 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.

HTML div: Bereiche (division) bilden

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 (Dez 2017) heißt es sinngemäß:

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

Von XHTML nach HTML5

In XHMTL lagen 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>

dPositionieren und Effekte

Aussterben wird HTML div dennoch nicht. div-Tags nehmen jede Art von Inhalt auf, lassen sich ineinander verschachteln und bilden weiterhin einen leistungsfähigen Mechanismus, der jeden Bereich einer Webseite erreicht. In erster Linie wird HTML div benutzt, um

Dazu werden die Attribute class, style, id, lang, dir und data- benutzt.

Navigation mit nebeneinander liegenden div Tags
Positionieren und animieren mit div-Tags
Positionieren und Animieren mit Hilfe von div- und span-Tags
<nav class="anime">
    <div class="box">
        <span>
            <img src="" … />
        </span>
    </div>
    <div class="box">
        <span>    
            <img src="" … />
        </span>
    </div>
    <div class="box">
        <span>
            <img src="" … />
        </span>
    </div>
</nav>

Kein semantisches Tag – ohne Bedeutung?

DIV (division) bedeutet einfach Bereich und hat weitere keine inhaltliche Bedeutung – keine Semantik wie p oder nav oder ol. Natürlich könnten div-Tags für Texte und selbst für Listen eingesetzt werden. Aber während ein p-Tag dem Text eine Bedeutung zuweist (ein Gedankengang, Text zu einem Thema) und Listen eine Aufzählung bilden, ist div das Tag für Logos, ein Motto oder ein einzeiliges Textfragment.

Dabei geht es nicht darum, ob Suchmaschinen einem semantischen Tag wie p oder ul mehr Bedeutung zumessen (wohl kaum), aber Pflege und Korrekturen im HTML-Markup fallen leichter, wenn die Rückseite kein Einheitsbrei von DIV-Tags ist. Davon abgesehen bildet die Vielfalt der semantischen Tags eine stabilere Basis für das CSS.

div