CSS, HTML und Javascript mit {stil}

HTML div • Positionieren und Animieren

HTML DIV : Positionieren und Animation

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.

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 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>

div Positionieren 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>

Mehr zu HTML – Struktur

Ä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.