Der Div-Wahnsinn

1 | 24250 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Der Div-Wahnsinn" mit Ihrem Wissen!

Sinn und Unsinn

Anzeige Hier werben

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.

Oft neigen auch "Umsteiger" von Tabellenlayouts zu einem übermäßigen Gebrauch von div-Elementen.

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.

Block-Elemente

Überschriften

Oftmals werden div-Blöcke eingesetzt um Überschriften zu kennzeichnen. Dies könnte zum Beispiel so aussehen:

Negativbeispiel Überschriften  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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:

Semantisch korrekte lösung  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="inhalt">
    <h1>
        Meine Überschrift
    </h1>
    Hier könnte Text folgen
    <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:

Negativbeispiel Absätze  
HTML
1
2
3
4
5
6
7
8
9
<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:

Semantisch korrekte lösung  
HTML
1
2
3
4
5
6
7
8
9
<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:

Negativbeispiel Listen  
HTML
1
2
3
4
5
6
7
<div id="menu">
    <div class="menupunkt">
        <a href="#">
            Link
        </a>
    </div>
</div>

Durch eine Liste ließe sich dies wie folgt darstellen:

Semantisch korrekte Liste  
HTML
1
2
3
4
5
6
7
8
<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.

Negativbeispiel Formulare  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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:

Semantisch korrekteres Formular  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<fieldset>
    <legend>
        Überschrift
    </legend>
    <div>
        <label for="feld_id">
            Eine Beschreibung
        </label>
        <input type="text" id="feld_id" />
    </div>
</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:

Negativbeispiel Zitate  
HTML
1
2
3
<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.

Semantisch korrektes Zitat  
HTML
1
2
3
<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 nicht gesondert dargestellt, auch hier hilft CSS und der entsprechende Artikel.

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.

Negativbeispiel horizontale Linie  
HTML
1
<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.

Semantisch korrekte horizontale Linie  
HTML
1
<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:

Negativbeispiel zu Tabellen  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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:

Semantisch korrekte Tabelle  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<table>
    <tr>
        <th>
            Stadt
        </th>
        <th>
            Postleitzahlen
        </th>
    </tr>
    <tr>
        <td>
            Berlin
        </td>
        <td>
            10001-14199
        </td>
    </tr>

Inline-Elemente

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. Hier möchte ich auf den Artikel HTML-Textauszeichnung verweisen, der dies erklärt.

Prominente Beispiele

Christoph Schneegans zeigt auf seiner Seite ein paar typische und prominente Beispiele für Div-Suppen.

Ausblick auf HTML5

In HTML5 kommen zu den bisherigen Elementen noch einige hinzu, wie in dem verlinkten Artikel einzusehen ist.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite "Der Div-Wahnsinn" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Der Div-Wahnsinn" hier bearbeiten.