HTML div • Positionieren und Animieren

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 HTML nach HTML5

Bevor HTML5 ins Rampenlicht trat, 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 Webseite 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

• optisch zusammengehörige HTML-Elemente mit CSS formatieren,
• Gruppen von HTML-Blöcken zusammenzufassen und zu positionieren,
• HTML, CSS und Inhalt mit JavaScript zu animieren

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

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