CSS & HTML-Tutorials auf nicogutmann.de

Mach es kurz und knackig

Freitag, 9. Oktober 2009, um 15:26 Uhr in HTML-Tutorials.

DIVities, Diviät, Div-Suppen, man kennt die Begriffe. Es beschreibt auf sarkastische Art und Weise, dass man zu viele Divisionen (Div-Tags) für sein Markup verwendet bzw. für alles Mögliche. Das ist ein Extrem, es gibt aber auch Entwickler, die ihre Seite semantisch korrekt deklarieren (Menu als Liste, Überschriften in h-Tags, etc) und trotzdem eine Div-Suppe fabrizieren, zumindest in Vorspeise-Größe.
Der Sinn und Zweck von Divisionen (div) ist mittlerweile in Vergessenheit geraten und es ist fast schon Standard geworden jedem Bereich von Header über den Inhalt bis zur Site-Info (Footer) in ein Div-Tag zu packen:
<div id="header"></div>
<div id="inhalt"></div>
<div id="site-info"></div>

Das erscheint in erster Linie nun nicht verkehrt, ist es aber zumeist, wenn man bedenkt, dass sich in dem Div #header zumeist nur eine Überschrift befindet bzw. das Logo in einem zusätzlichen h-Tag.

Der Zweck von Divisionen

Erst einmal zurück zum Begriff der Division: Ein div-Tag wurde entwickelt, um mehrere Objekte die inhaltlich zusammengehören, in direkte Verbindung miteinander zu setzen, ein Beispiel hierfür wäre ein simpler Text mit mehreren Zwischenüberschriften, die aber einem Grundthema angehören. Dieser Artikel beispielsweise:
<div class="textbox">
<h2>Mach es kurz und knackig</h2>
<p>DIVities, Diviät, Div-Suppen, man kennt die Begriffe...</p>
<h3>Mach es kurz und knackig</h3>
<p>Erst einmal zurück zum Begriff der Division:...</p>
</div>

Der Artikel behandelt ein Thema und kann bzw. sollte auch im Markup als zusammenhängender Text verstanden werden. Gehen wir zurück zu dem Beispiel mit dem #header und sehen uns ein Beispiel an, wie viele diesen (hier vereinfacht gezeigt) deklarieren:
<div id="header">
   <h1>Ich bin eine Überschrift</h1>
</div>

Die Division #header besitzt ein einziges Element und wird vermutlich nur sehr selten mehr enthalten. Hier ist ein div-Tag total überflüssig und sollte weggelassen werden.
Ähnlich verhält es sich auch mit Navigationen, die im Prinzip ja zumeist nur aus einer Liste bestehen:
<ul id="navi">
   <li>Menupunkt</li>
   <li>Menupunkt</li>
   <li>Menupunkt</li>
</ul>

Auch hier wird oft noch ein Div herumgebastelt, was eben nicht seinen ürsprünglichen Zweck erfüllt, sondern aus anderen (meist gar keinen) Gründen gebaut wird. Weg damit, wenn es nicht unbedingt gebraucht wird!

Eine kluge Vorransgehensweise

Ich glaube und hoffe, dass das Prinzip nun verstanden wurde, sonst hätte ich auch noch ein paar Beispiele im Ärmel .
Ich schreibe mein HTML-Markup nach semantischen Aspekten, soweit nichts Neues. Dabei achte ich nicht auf das Layout, sondern ganz alleine auf den Inhalt, somit kommen bei mir Div-Tags zunächst überhaupt nicht oder ganz selten zum Einsatz. Wenn ich das semantische Markup geschrieben habe, sehe ich mir alle noch einmal an und versuche Elemente, die zusammengehören, zu verknüpfen und stecke sie in ein gemeinsames Objekt, dem Div.
Somit komme ich nicht in Versuchung Divities auszulösen und alles in so einen Tag zu setzen, sondern verwende es nur, wenn es für mich sinnvoll erscheint, wodurch man nicht nur viel Bytes und Zeit spart, sondern auch eine stärkere Übersicht erhält.