HTML div • Positionieren und Animieren

HTML div: Bereiche (division) bilden

Mit HTML4 und XHTML war das div-Element der Hans-Dampf-in-allen-Gassen. Mit HTML5 endet die tragende Aufgabe des div-Elements. Auf HTML Living Standard (November 2021) heißt es sinngemäß:

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

Modernes HTML

Bevor HTML5 ins Rampenlicht trat, lagen Seitenkopf, Navigationsleiste, der Block der Inhalte und der Seitenfuß einer HTML-Seite meist in div-Elementen, 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-Elements

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

Struktur-Objekte wie HTML header, footer, article und section gliedern und strukturieren den Inhalt besser, so dass sich die Rolle des div-Elements auf den Transport von CSS und die Identifizierung von Blöcken mit Javascript beschränkt. Ein HTML div sollte 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-Elemente positionieren

Aussterben wird HTML div dennoch nicht. div-Elemente 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

Das div-Element bleibt das bevorzugte Element, wenn Inhalte positioniert werden. Zu den Klassikern gehört die Formatierung von kurzen Inhalten in Spalten, die mit dem WordPress-Gutenberg-Editor Einzug gehalten hat.

Kurzer Header

120 P

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec eros a ante mollis egestas eu in risus. 

Langer Header mit zweiter Zeile

170 P
Nur heute!

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar iaculis tempus. Maecenas scelerisque sit amet est non finibus.

<div class="wp-block-group narrow">
	<div class="wp-block-group__inner-container">
		<div class="wp-block-columns">
			<div class="wp-block-column">
				<p class="has-accent-background-color has-background has-normal-font-size">
					Kurzer Header
				</p>
				<figure class="wp-block-image size-large">
					<img loading="lazy" width="680" height="680" src="distel.jpg" alt="Disteln" class="wp-image-6659" srcset="distel.jpg 680w, distel-300x300.jpg 300w, distel-150x150.jpg 150w" sizes="(max-width: 680px) 100vw, 680px">
				</figure>
				<p class="has-text-align-center has-large-font-size">
					120 P
				</p>
				<p class="has-small-font-size">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec eros a ante mollis egestas eu in risus. 
				</p>
			</div>
			<div class="wp-block-column">
				<p class="has-accent-background-color has-background has-normal-font-size">
					Langer Header mit zweiter Zeile
				</p>
				<figure class="wp-block-image size-large">
					<img loading="lazy" width="680" height="680" src="rosen.jpg" alt="Rosen" class="wp-image-6660" srcset="rosen.jpg 680w, rosen-300x300.jpg 300w, rosen-150x150.jpg 150w" sizes="(max-width: 680px) 100vw, 680px">
				</figure>
				<p class="has-text-align-center has-large-font-size">
					170 P <br>
					nur heute<br>
					bis Mitternacht
				</p>
				<p class="has-small-font-size">
					Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar iaculis tempus. Maecenas scelerisque sit amet est non finibus. Duis imperdiet sem eu venenatis pretium. Morbi laoreet rutrum tempus.
				</p>
			</div>
		</div>
	</div>
</div>

div-Elemente animieren

Für Animationen werden die Attribute class, style, id, lang, dir und data- benutzt.

Hier wirkt ein altmodisches HTML-Attribut: ontouchstart setzt eine Javascript-Anweisung, um den hover-Effekt auf Touchscreen in touchstart umzusetzen.

Effekte brauchen ebenso verschachtelte div-Elemente wie das Spaltenlayout:

<div class="flipbox" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<img loading="lazy" src="front.jpg" width="600" height="468" alt="front">
		</div>
		<div class="back">
			<img loading="lazy" src="back.jpg" width="600" height="448" alt="back">
		</div>
	</div>
</div>

img flip mit Bildwechsel: Vorderseite, Rückseite

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.