Der Begriff Div-Wahnsinn (auch Divitis oder Div-Suppe genannt) ist ein Phänomen, das oft im Bereich der CSS-basierten Layouts zu finden ist.
Er bezeichnet den übermäßigen Gebrauch von div-Elementen im Seitenaufbau. Beim div-Element handelt es sich in (X)HTML um ein allgemeines Blockelement ohne feste Bedeutung, es kann also prinzipiell immer dann eingesetzt werden, wenn ein Blockelement benötigt wird. Allerdings gibt es in vielen Fällen Elemente, die semantisch sinnvoller eingesetzt werden könnten.
In den Anfangsjahren von CSS-basierten Layouts neigten insbesondere Umsteiger von Tabellenlayouts zu einem übermäßigen Gebrauch von div-Elementen. Dies war zum Teil auch der mangelhaften Layout Möglichkeiten in CSS 1 geschuldet.
In einigen Fällen bedeutet die Umstellung von div-Suppen auf semantisch korrekte Elemente einen kleinen Mehraufwand bei der Anpassung an die Seite, in der Regel können die div-Elemente einfach gegen die korrekteren Elemente ausgetauscht werden, ohne das ein Mehraufwand entsteht. In manchen Fällen, zum Beispiel bei den Tabellen, verringert sich der Aufwand merklich, als wenn div-Workarounds genutzt werden würden.
Beispiele
Bei allen Beispielen folgt zunächst ein Beispiel, wie man es nicht machen sollte, danach wird ein Beispiel aufgeführt, wie es besser geht.
Überschriften
Oftmals werden div-Blöcke eingesetzt um Überschriften zu kennzeichnen. Dies könnte zum Beispiel so aussehen:
<div id="inhalt">
<div class="ueberschrift">Meine Überschrift</div>
Hier könnte Text folgen
<div class="sub_ueberschrift">Eine untergeordnete Überschrift</div>
...
</div>Dieses Beispiel ist zwar so funktionsfähig, kann aber durch die Verwendung der Überschrift-Tags h1 bis h6 semantisch korrekt dargestellt werden. Somit wäre folgendes Beispiel vernünftiger:
<div id=""inhalt"">
<h1>Meine Überschrift</h1>
<p>Hier könnte Text folgen</p>
<h2>Eine untergeordnete Überschrift</h2>
...
</div>Dabei sollte man sich nicht davon verwirren lassen, dass die Browser die Überschriften formatieren, wie sie wollen. Dies kann mit CSS behoben werden.
Absätze
Gerade bei Absätzen ist die Verlockung groß sich in Div-Suppen zu verstricken, da Blockelemente automatisch einen Zeilenumbruch bewirken:
<div>Absatz 1</div>
<div>Absatz 2</div>
<div>und so weiter ...</div>Auch hier hat die W3C einen Tag für Absätze vorgesehen, das p-Element. Analog dazu:
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>und so weiter ...</p>Listen und Menüs
Für die Auflistung von Inhalten gibt es gleich mehrere Tags, die eine solche Liste einleiten können: ul leitet eine ungeordnete Liste ein, ol eine geordnete. Alle Browser zeigen ungeordnete Listen meist mit Punkten an, geordnete mit Zahlen oder Buchstaben. Auch dies kann mit CSS formatiert werden. Gerade diese Elemente werden oft unterschätzt.
Menüs sind – semantisch betrachtet – nichts anderes als eine Auflistung von Links.
Somit lässt sich ein klassisches Menü oft so finden:
<div id="menu">
<div class="menupunkt"><a href="#">Link </a></div>
</div>Durch eine Liste ließe sich dies wie folgt darstellen:
<ul id="menu">
<li><a href="#">Link</a></li>
</ul>Auch horizontale Menüs sind so möglich, wenn die Listenelemente (li) als Blockelemente mit float nebeneinander positioniert werden oder als Inlineelemente deklariert werden.
Formulare
Gerade die Gestaltung von Formularen lässt selbst erfahrene HTML-Anwender ins Schwitzen kommen, da dies oftmals nicht einfach ist und meist einiges an CSS-Code benötigt.
<div class="formular"><div class="formularueberschrift">Überschrift</div<div class="formularfeld"><div class="beschreibung">Eine Beschreibung</div><div class="feld"><input type="text" /></div></div></div>Dies symbolisiert quasi schon einen Div-Wahnsinn auf höchstem Niveau. Es folgt ein Lösungsvorschlag von mir:
<fieldset><legend>Überschrift</legend>
<label for="feld_id">Eine Beschreibung</label><input type="text" id="feld_id" /></fieldset>Gerade wenn man Formulare verwenden möchte, in denen die Beschreibung und das Feld nebeneinander stehen sollen, kommt man hier kaum um den Einsatz von div-Elementen, es sei denn, man verwendet eine Liste.
Zitate
Oft werden Zitate in Foren oder Weblogs gesondert dargestellt und diese in ein Blockelement verpackt:
<div class="zitat">Ein kleiner Schritt für mich, aber ein großer Sprung für die Menschheit</div>Dabei wird oft vergessen, dass es auch in HTML ein Element für Zitate gibt: blockquote.
<blockquote>Ein kleiner Schritt für mich, aber ein großer Sprung für die Menschheit</blockquote>Das blockquote-Element wird in der Regel von Browsern gesondert dargestellt.
Horizontale Linien
Nun betreten wir das Kuriositätenkabinett. Ich habe so etwas noch nie gesehen, aber ich könnte mir durchaus vorstellen, dass jemand auf die Idee kommen könnte eine horizontale Linie mit einem div-Element darzustellen. Da man dies nicht ohne CSS schaffen kann, verwende ich hier inline-styles anstelle von fiktiven Ids und Klassen wie in den bisherigen Beispielen.
<div style="height:0; width:10em; margin:0 auto; border-bottom:1em solid #000;"></div>Auch Grafiken werden an dieser Stelle oftmals eingesetzt, was in sofern vermieden werden kann, wenn bis zu dreifarbige Linien eingesetzt werden sollen. Hierbei bedient man sich dem Element hr. Mehrfarbigkeit kann man erreichen, indem zusätzlich zur Höhe der Linie noch zwei verschiedenfarbige Rahmen definiert werden.
<hr style=""height:1em; width:10em; margin:0 auto; color:#000; background:#000;"" />Die Gestaltung von horizontalen Linien ist mit CSS aufwendig, da die Angaben von den Browsern oft verschieden interpretiert werden.
Tabellen
Die Div-Suppe kann noch ad absurdum geführt werden, wenn man versucht Tabellen durch div-Elemente zu ersetzen. So unglaublich dies klingt und so groß der Aufwand auch ist, kommt dies immer wieder vor. Denn oft setzt sich in den Köpfen der Webdesigner fest: „Tabellen sind böse und falsch“. Dies stimmt nicht immer.
Tabellen sind nur schlecht, wenn sie zu Layoutzwecken missbraucht werden. Inhalte, die tabellarische Daten enthalten, sind natürlich in Tabellen am besten aufgehoben!
Trotz dessen lassen sich oft die absurdesten Workarounds um Tabellen zu vermeiden in Quelltexten wiederfinden:
<div class="zeile">
<div class="spaltenueberschrift">Stadt </div><div class=""spaltenueberschrift"">Postleitzahlen</div>
</div>
<div class="zeile">
<div class="spalte">Berlin</div><div class="spalte">10001–14199</div>
</div>Bei solchen Daten sind Tabellen nicht nur erlaubt, sondern auch erwünscht:
<table>
<tr><th>Stadt</th><th>Postleitzahlen</th></tr>
<tr><td>Berlin</td><td>10001-14199</td></tr>
</table>Neben dem universellen Block-Element, gibt es noch das universelle inline-Element span. Auch dies kann mit CSS wie gewünscht formatiert werden und somit zu einer span-Suppe verleiten, obwohl es oft semantisch schönere Elemente gibt.
- Das RGB-Farbsystem - 26. Januar 2022
- Logodesign: Gestaltungsgrundlagen - 28. Dezember 2021
- Was ist Kerning bzw. Unterschneidung? - 28. Dezember 2021
