Tipp 5: DIVitis? Ist meine Webseite krank?

Diagnosen, die auf »itis« enden, bezeichnen in der Medizin das Krankheitsbild der Entzündung. Wenn nun von Divitis die Rede ist, dann bezeichnet diese Wortkreation wohl tatsächlich eine Krankheit, die Krankheit des übermäßigen und vollkommen unkontrollierten Einsatzes von DIV-Tags zum Zusammenbasteln des Inhalts einer Webseite.

Doch wo ist eigentlich das Problem?

Das Problem begann, als es in Mode kam, eine Website – die ominöse Homepage – sein eigen zu nennen. Jeder wollte dieses Statussymbol. Eine eigene Webadresse macht schon etwas her. Die Zeiten haben sich geändert, eines jedoch bleibt. Eine eigene Website gehört einfach dazu. Vor allem Firmen kommen heute kaum noch ohne eine Internetpräsenz aus.

Irgendwann kam jedoch der Punkt, an dem die alt hergebrachte Art und Weise eine Webseite zu strukturieren nicht mehr sehr beliebt noch angesehen war, nämlich die Strukturierung mittels Tabellen. Was also tun.

Viele Probleme, mit denen man als »Webdesigner« zu tun hat, sind darauf zurück zu führen, dass nicht alle Browser das gleiche tun, geschweige denn, sich an gemeinsame allgemeingültige Grundsätze halten – die Spezifikationen. Tabellen waren DAS Mittel, um diesem Problem im gewissen Maße Herr zu werden.

Nun aber zum Hauptproblem! Jeder darf sich Webdesigner nennen, und jeder, der sich auf dem Feld der Entwicklung von Webseiten bewegt, hat den heiligen Gral der Erkenntnis auf seinem Schreibtisch stehen. Jeder hat das ultimative Rezept. Leider verbreiten sich im Internetzeitalter Informationen schneller, als es einem manchmal lieb sein kann. Und so kursierten schnell Lösungen für das Tabellenproblem, denn Tabellen waren plötzlich gar nicht mehr so angesagt. Ganz im Gegenteil, es entwickelte sich sozusagen ein Antipattern^[1], etwas, das gut dazu zu verwenden war, die Arbeit anderer zu bewerten, und das nicht immer positiv.

Qualität und Professionalität gehen aber nicht mit der Berufsbezeichnung einher, sondern sind das Ergebnis strukturierter Arbeit, durchdachtem Vorgehen und dem gewissen Blick für das große Ganze.

Und genau an dieser Stelle unterscheidet sich der wahre Fachmann vom Rest der Welt. Die Fähigkeit objektiv Lösungen zu bewerten und auf deren Basis geeignete Lösungen zu entwickeln, ist der deutlich bessere Weg.

Ein schlechter Tausch

Wer nun auf die Idee kommt, Tabellen aus dem Layout einer Webseite zu verbannen, ist sicher auf dem richtigen Weg, wenngleich es natürlich Anwendungsfälle für die Benutzung von Tabellen gibt. Eine weniger gute Idee ist es allerdings, sich daran zu machen, und dem nächsten Trend hinterher zu laufen: DIVs! Der pragmatische Ansatz, die alten Layouts zu modernisieren, in dem einfach alles auf DIVs umgebaut wird, ist sicher der falsche Weg.

Ein Symptom der Divitis ist, dass das Verhältnis zwischen Markup und eigentlichem Inhalt eines Dokumentes gegen Null tendiert. Tabellen sind in dieser Hinsicht bereits verschwenderisch, DIVs lösen ein Problem jedoch auch nicht. Viel Markup, wenig Inhalt, keine Struktur! Darüber hinaus, und dazu muss man nicht einmal den eigentlichen (X)HTML-Code der Webseite gesehen haben, sprechen umfangreiche Stylesheets dafür, dass etwas nicht stimmen kann, oder das Ergebnis ein wenig weiter vom Optimum entfernt ist, als erwartet. Die Verschachtelung von DIVs hat schließlich nur ein Ziel, bestimmtem Inhalt ein bestimmtes Aussehen zu geben und an einer bestimmten Position anzuzeigen. Zusammenhängende Strukturen sind im Dokument kaum zu erkennen.

Eine (etwas ältere) Liste der an Divitis erkrankten, unter Umständen prominenten Websites, ist hier zu finden. Allein ein Blick auf die Tabelle (ja, hier ist die Tabelle einmal für den richtigen Zwecke eingesetzt worden) verrät schon das ganze Ausmaß des Problems.

Lösungen

Was aber ist der Grund dafür? Wie kommt es zu Divitis? Oft beginnt man damit, ein Layout zu erstellen, noch bevor der Inhalt auch nur in Ansätzen ausgearbeitet ist. Das ist nicht weiter verwerflich, wenn man nicht von Beginn an das Ziel vernachlässigt oder es gar aus den Augen verliert. Was möchte man mit einer Webseite erreichen? Das Transportieren von Informationen ist noch immer das vorrangige Ziel, oder sollte es zumindest sein. Der zentrale Punkt ist also die Information, der Inhalt und nicht das Layout. Gut strukturierter Inhalt kann immer auf jede erdenkliche Art dargestellt werden. Dafür ist nicht viel nötig.
Gute Kenntnisse über die Möglichkeiten von CSS und nicht zuletzt über die richtige Verwendung von (X)HTML reichen bereits aus.

Leider sind nicht sehr viele Profis mit den Spezifikationen von HTML und XHTML vertraut, so scheint es zumindest. Wie das Problem des schlechten Codes eigentlich entsteht, müsste dem Fachmann eigentlich auffallen. Nämlich die falsche Verwendung der verschiedensten HMTL-Tags.

Jedes Element, das in (X)HTML spezifiziert ist, hat eine Bedeutung, eine Semantik. Diese Semantik bestimmt, wie und für welchen Zweck ein Element eingesetzt werden kann und darf. Leider gibt es niemanden, der die korrekte Verwendung überprüft, so dass fehlerhafte Verwendungen oft gar nicht auffallen. Die Browser werden es schon anzeigen, und wenn nicht, noch ein paar DIVs und Styles …

Die Gute Nachricht ist, es gibt eine Lösung. Die schlechte Nachricht ist, sie macht Arbeit. Arbeit kostet jedoch Geld, Nerven und fordert Disziplin.

Zuerst der Inhalt

Gehen wir das Problem doch einmal anders an. Nehmen wir an, wir machen uns zuerst Gedanken über den Inhalt einer Seite. Er muss nicht perfekt sein, aber eine Struktur sollte er besitzen. Das ist Arbeit, und es macht sicher mehr Spaß im Grafik-Programm des Vertrauens ein paar Pixel hin und her zu schieben. Dennoch wird sich der Aufwand lohnen, dann nämlich, wenn das Ergebnis auch wirklich den Erwartungen entspricht, weniger Nerven kostet und einen ganz anderen Qualitätslevel erreicht.

Wir haben also Inhalt. Als Faustregel gilt, der Inhalt ist perfekt strukturiert, wenn man durch einfaches Austauschen eines Stylesheets das Layout komplett ändern kann, OHNE Anpassungen am Markup. Erlaubt sind aber nur Element-Definitionen und möglichst wenig Identifikatoren und Klassen. DIVs sind ebenfalls tabu! Ein Hauptaugenmerk sollte dafür auf Gewichtgebende-Elemente wie Überschriften (<h1>…<h6>), Hervorhebungen (<strong>, <em>) usw. gelegt werden. Text braucht Struktur, um alle wichtigen Informationen auffindbar und ansprechend zu verpacken.

Einen guten Artikel über Trennung von Inhalt und Layout findet man auf InRetis.

Nun fehlt uns noch das Salz in der Suppe. Menüs, Banner, … einfach all das, was in der heutigen Zeit eine Webseite zu einer richtig guten Webseite macht. InRetis verwendet dafür folgende Aufteilung:

Um dies zu erreichen, werden fünf Bereiche benötigt (der Fußbereich fehlt in der Grafik). Und genau hier kommen nun DIVs zum Einsatz, und zwar entsprechend ihrer durch die Spezifikation vorgegebene Semantik. Ein DIV ist ein Container, nicht mehr und nicht weniger.

Als Kompromiss werden diese DIVs durch Identifikatoren mit Layout-Informationen versorgt. Dies bricht ein wenig die Trennung von Inhalt und Layout auf, beschränkt die Verflechtung von Styles im Dokument aber auf ein Minimum.

Anmerkung: Dieses Vorgehen ist nicht perfekt, und lässt sich durch die Verwendung geeigneter Selektoren in Bezug auf die Trennung besser lösen. Dies ist jedoch als Kompromiss zwischen Einfachheit und Konzepttreue zu werten.

Das Layout macht auch in Bezug auf das verwendete Markup Kompromisse. Im Kopfbereich werden die verschiedenen Elemente dadurch in Position gebracht, dass hier ebenfalls DIVs verwendet werden. Zählt man aber die verwendetet DIVs im gesamten Dokument, wird man sehen, dass man in diesem Fall mitnichten von Divitis sprechen kann.

Fazit

DIVs sind nicht böse. Sie haben ihren Zweck. Werden sich so verwendet, wie es in der Spezifikation definiert ist, werden sie mit Bedacht eingesetzt, so sind sie ein guter Helfer für bestimmte Aufgaben. Ein übermäßiger oder gar exzessiver Gebrauch allerdings führt zu Divitis. Schwer wartbare und unübersichtliche Dokumente sind die Folge. Nicht zuletzt das überproportionale Anwachsen von Style-Definitionen ist ein Indikator dafür. Zeit gegen zu steuern.

Fußnote

[1] Antipattern: Antimuster oder entgegegesetztes Muster, Vorlage zu einem nicht zu empfehlenden Vorgehen.