DIVlos sinnlos | Markup Webdesign Journal

23.01.06DIVlos sinnlos

Die Layout-Tabellen-Diskussion ist kaum überstanden, schon werden sehr merkwürdige Ansätze verbreitet. Die DIVlose Website. Das ist ungefähr genau so sinnvoll, wie der komplette Verzicht auf Tabellen oder das Ersetzen von Tabellenlayouts durch 1:1 Nachbildungen mit DIV. Eine Website, die aus einer UL besteht und versucht die Inhalte mit Hilfe LI zu strukturieren, stellt einen mehr als suboptimalen Ansatz dar und sollte nicht weiter verfolgt werden.

Ein Beispiel

Folgendes Beispiel versucht die Seitenstruktur mittels einer ungeordneten Liste (UL) nachzubilden. Die einzelnen Seitenbereiche sollen in den Listenelementen (LI) stecken.

Dieses Beispiel kann nicht zur Nachahmung empfohlen werden.

 <ul id="rahmen">
   <li id="header">
   </li>
   <li id="content">
   </li>
   <li id="sidebar">
   </li>
   <li id="footer">
   </li>
 </ul>

Abgesehen davon, dass sich die Seitenbereiche so nur schwer positionieren lassen, fehlt diesem Konstrukt so einiges. Auch wenn LI fast alle (X)HTML Elemente aufnehmen dürfen, außer DIV. Noch wilder wirds durch den Einsatz von Definitionslisten (DL). Der Ideengeber argumentiert hingegen mit der fehlenden semantischen Relevanz der DIV. Das stimmt, ist aber kein Grund dafür, auf sie zu verzichten.

Ein weiteres Argument gegen DIV sind, bei schlechter Umsetzung, extrem verschachtelte Seitenstrukturen ähnlich den Layouttabellen, die sich in einem Quellcodechaos und in der Folge größeren Dateien äußern. Das ist Divitis. Aber es gibt Mittel und Wege, der Divitis vorzubeugen und auch komplexe Layouts relativ schlank umzusetzen.

DIV sind unbedingt Bestandteil guter Websites

Gerade, weil DIVs keine semantische Relevanz besitzen, sind sie so gut geeignet, Websites optisch in verschiedene Hauptbereiche einzuteilen.

Denn bei dieser Einteilung über DIVs geht es um die optische Präsentation, die zunächst keinen Einfluss auf die Bedeutung der Inhalte hat. Für diese Zwecke stehen all die anderen Elemente zur Verfügung, um schließlich schöne und gleichzeitig inhaltlich sinnvoll strukturierte Websites zu produzieren.

Fazit

Natürlich geben die sich häufenden Fälle von Divitis - meist in einem fehlenden Verständnis standardkonformen Webdesigns begründet - Anlass dazu, alternative Methoden zu diskutieren. Meiner Meinung nach, kann dieses oben geschilderte Konstrukt keine wirkliche Diskussionsgrundlage bilden. Da müssen, wenn nötig, bessere Ansätze her.

Zum Thema Listen im Sinne der Barrierefreiheit einsetzen hat der Webstandard Heiko noch einen ausführlichen Artikel verfasst.

Bookmarks

Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.

26 Antworten

reieRMeister am Jan 24, 2006 | Reply

Hallo,

sehr netter Artikel. Ich hatte das Thema vor einiger Zeit von der anderen Seite her beleuchtet.
SilentWarrior am Jan 24, 2006 | Reply

Wo hört man denn so einen Unsinn? Ich hoffe bloss, dass sich das nicht weiter verbreitet. Da sind mir Unmengen an Divs ja eigentlich noch lieber.

Es gibt ja auch schon Leute, die Blogpostings mit einer Definitionsliste realisieren wollen — darüber kann man streiten, ich persönlich finde es ziemlich idiotisch.
Heiko am Jan 24, 2006 | Reply

Das ist ja wirklich noch schlimmer als Tabellen zum Layouten. Wer das einsetzt hat mit Semantik, Usability & Accessibility wohl gar nichts am Hut. Oh man, kann den Vorrednern nur Recht geben und hoffen, das sich das nicht verbreitet.
Oliver Roick am Jan 24, 2006 | Reply

Da würde mich aber auch mal interessieren, wer solchen Schund verbreitet.
Birgit am Jan 24, 2006 | Reply

Naja, eine Seite ganz ohne DIVs aufzubauen, ist ungefähr das gleiche, wie Layouttabellen zu verwenden, oder? DIV-phobia anstatt Div-itis. Danke für den Artikel!
Eric am Jan 24, 2006 | Reply

Naja, mein letztes Layout hatte keine divs und davon abgesehen, dass mein Layout hässlich war war die Wartung eigentlich ganz einfach. Natürlich habe ich nicht versucht alle Elemente in Listen zu packen, das ist ein mehr als suboptimaler Ansatz, das ist Unsinn!

Auch dieser Übersemantisierung muss vorgebeugt werden.
Jakob am Jan 25, 2006 | Reply

Guten Morgen zusammen!

Kann mich dem Fazit nur anschließen. Bleibt zu hoffen, dass diese Idee schnell wieder verworfen wird und sich nciht wachsender Beliebtheit erfreut.

lg Jakob
Markus am Jan 25, 2006 | Reply

eine Verteilung der Seitenelement auf bspw. eine Liste würde IMHO auch bedeuten alle Listenelemente wären semantisch auf der gleichen Ebene. Konsequnterweise würde bei einem Header mit h1. eine tiefere Verschachtelung der Liste in den Folgeelementen vorraussetzen, falls man h2. oder tiefer einsetzen möchte.

Das fände ich arg wirr. Dann doch lieber DIVs drumherumtaggeln…
Björn am Jan 25, 2006 | Reply

@ Boris und Heiko

Danke Euch beiden für Eure Artikel zum Thema.
Heiko am Jan 26, 2006 | Reply

Keine Ursache, danke für den Gedankenanstoss zum Artikel!
Kai Laborenz am Jan 26, 2006 | Reply

Nun würde mich tatsächlich mal interessieren, wo der Einsatz von ungeordneten Listen zum Abbilden einer ganzen Seite empfohlen wird…

Gruß, Kai
m3nt0r am Jan 27, 2006 | Reply

Guter Artikel!

Hatte mir letztens mal den DIVless link in mein delicious gepackt um mir das später nochmal in Ruhe durchzugehen, aber ich denke nun das ich mir das sparen kann ;)

Was den sinnvollen Einsatz von DIVs betrifft stimme ich dir zu. Ich sehe DIVs auch als Unterteiler - mehr nicht.

Aber es ist ja immer das gleiche mit den Leuten. Jetzt gibt es neuerdings kaum noch Table-layouts zum meckern.. da müssen nun halt die DIVs ran.. hachja..
Heiko am Jan 27, 2006 | Reply

Für alle Interessierten: Go DIVless
Markus Wulftange am Jan 27, 2006 | Reply

Da zeigt sich mal wieder, dass kaum jemand über dieses Thema der Semantik nachdenkt. Man schnappt irgendwo etwas auf – sei es im Internet oder im richtigen Leben – und lässt sich aufgrund gut ausgelegter aber dennoch falscher Argumente oder einfach nur aufgrund fehlender Kenntnisse/fehlenden Wissens davon überzeugen, und setzt es prompt um. Überall, ausnahmslos. Da werden nicht nur Navigationsmenüs aus ihren Tabellen befreit und in Listen gesteckt, sondern gleich alle Elemente. Denn jedes Webseiten-Element kann – mithilfe ausgereifter Gehirnakrobatik – Teil einer übergeordneten Liste interpretiert werden – oder etwa nicht?

Das erinnert mich gerade an ein Thema in einem Forum. Da erzählte ein Schüler/Student doch glatt, sein Professor habe ihnen weismachen wollen, ein HTML-Dokument dürfe nur ein „p“-Element besitzen. Der enthaltene Text müsse dabei mit Erzwungenen-Zeilenumbruch-Elementen in Absätze unterteilt werden.
m3nt0r am Jan 27, 2006 | Reply

Bezugnehmend auf: “Da werden nicht nur Navigationsmenüs aus ihren Tabellen befreit und in Listen gesteckt,…”

Navigationselemente in Listen sind nichts böses, denn was kann mehr Sinn machen als die Dokumentenstruktur der Seite schon innerhalb einer geordnete Liste (OL) zu definieren?

1.Home,
2.Übersicht,
3.Kontakt.. etc..

Ich finde hier machen Listen am meisten Sinn.
Jens Meiert am Jan 28, 2006 | Reply

Eine Website, die aus einer UL besteht und versucht die Inhalte mit Hilfe LI zu strukturieren, stellt einen mehr als suboptimalen Ansatz dar und sollte nicht weiter verfolgt werden.

Ist in der Formulierung (wenn man “Inhalte” nicht sehr dehnt) und ohne konkrete Bedingung nicht richtig. Es ist durchaus denkbar und zeitgleich legitim, da semantisch korrekt, dass ein Dokument nur aus einer Liste besteht. Beispiel: Linkliste.

DIV sind unbedingt Bestandteil guter Websites

Nein. Diese Formulierung animiert dazu, unbedingt div-Elemente zu verwenden, auch wenn sie fuer die Dokumentstruktur gar nicht benoetigt werden. Aus diesem Grund halte ich diese Aussage sogar fuer gefaehrlich.

“div-Elemente koennen Bestandteil guter Webseiten sein” wuerde ich hingegen sofort unterschreiben.

Meine zwei Cent.
Björn am Jan 28, 2006 | Reply

Jens, danke für den Beitrag. Gute Einwände!

DIV sind unbedingt Bestandteil guter Websites

Ich geh jetzt hierbei von Websites mit Design aus. Und da braucht man rein fürs Gestalterische DIV, die nicht die Logik des Dokuments beeinflussen. Rein für die optische Einteilung.

Natürlich kann es Dokumente geben, die nur aus einer Liste bestehen. Aber keine ganze Website.

“div-Elemente koennen Bestandteil guter Webseiten sein” wuerde ich hingegen sofort unterschreiben.

Danke ;-)
Rafael am Feb 4, 2006 | Reply

Hallo Alle zusammen,

ich habe die Diskussion verfolgt, und frage mich jetzt, ob meine Idee einer Seitenstruktur, in Form einer an den Explorer angelehnten Navigation mit Hilfe verschachtelter Listen, völliger Blödsinn ist?
Hier ein Demo-Beispiel: http://www.wuesl.de/_exsample/index.html
Siegfried am Feb 6, 2006 | Reply

Im Großen und Ganzen sehr guter und vermutlich sehr notwendiger Artikel. In einem Punkt muß ich aber doch vehement widersprechen: Divs sind nicht für eine optische Präsentation da. Wenn man so denkt, dann bekommen wir wieder divitis mit Konstruktionen wie div class=”oben_links”. Divs dienen sehr wohl der logischen Strukturierung des Inhalts. Im Unterschied zu den meisten anderen Strukturelementen hat ein div nur keine semantische Vorbelegung. Die Bedeutung muß diesem Container also unbedingt durch einen passenden Klassennamen oder eine passende id mitgegeben werden. ein div class=”footer” oder div class=”main” hat sofort eine Bedeutung, auch ohne damit eine spezielle optische Präsentation zu verbinden.Und aus Konsistenzgründen verwende ich daher auch einen div class=”navigation” (der dann die Navigationselemente als Liste enthält, allerdings auch zusätzlich noch das Ziel eines Skiplinks und hr zur thematischen Gruppierung der Navigationselemente). Damit habe ich die groben funktionellen Bestandteile einer Seite benannt und deren Inhalt logisch gruppiert. Ich halte den Gedanken an Optik bei der Erstellung von html für grundsätzlich gefährlich. Auch bei divs.
Fabian am Feb 10, 2006 | Reply

Auch wenn LI fast alle (X)HTML Elemente aufnehmen dürfen, außer DIV.
Woher stammt denn diese Information, wenn ich fragen darf? Irritiert habe ich extra geforscht: In den DTD ist zu finden, dass ein LI %flow;-Elemente beinhalten darf. %flow; ist dabei nur eine Zusammenfassung von %block;- und %inline;-Elementen.