Tipp 4: Trennung von Inhalt und Layout

Eine perfekte Webseite bedeutet nicht zuletzt, dass neben der Angabe des benötigten DOCTYPEs, einem soliden (X)HTML-Code-Gerüst und natürlich fehlerfreiem Code die Struktur der Webseite besondere Aufmerksamkeit erhält. Strukturelle Überlegungen dienen hierbei vor allem dazu, die Webseite auch aus Sicht des Codes übersichtlich zu halten, und dem Inhalt eine Struktur zu verleihen. Nicht zuletzt ergibt sich der Inhalt eines Dokumentes vor allem aus den Informationen, die für Menschen gedacht und lesbar sind. Alle anderen Daten sind Auszeichnungen, also Markup, der dazu dient, die Informationen des Dokuments inhaltlich zu strukturieren und maschinenlesbar zu machen.

Die Struktur ist der Leim

Eine gute Struktur zeichnet sich dadurch aus, dass das Verhältnis zwischen eigentlichem Text und Markup möglichst groß ist. Das bedeutet, je weniger Markup, desto gewichtiger (auch für Suchmaschinen) ist der eigentliche Inhalt. Hierbei kommt es jedoch zu einem Problem. Code, der auf diese Weise gestaltet ist, vernachlässigt jegliche Art der Präsentation des Inhalts. Eine aktuelle Webseite lebt aber genau von dieser Präsentation. Grafiken, Farben, Banner, und Elemente außerhalb des eigentlichen Inhalts (z.B. Menüs) sind essentieller Bestandteil moderner Webseiten. Wie jedoch soll eine anspruchsvolle Präsentation erreicht werden, die darüber hinaus auch noch leicht pfleg- und wartbar ist? Kurzum, die Struktur des Dokumentes und somit seines Inhalts ist die Basis für ein perfekte Webseite. Sie ist das Bindeglied zwischen Dokument und Inhalt. Eine gute Struktur erleichter es erheblich, den Inhalt anprechend zu verpacken, ihm ein Layout zu geben.

Das Stichwort hier sind „Cascading Stylesheets (CSS)“ als Werkzeug für die Trennung von Inhalt und Layout. Der Einsatz von CSS ermöglicht es, das Design fast vollständig vom Inhalt zu separieren. Warum dies so wichtig ist, und wie man eine wirklich gute Struktur erhält, auf die sich jedes mögliche Layout anwenden lässt, soll nun gezeigt werden.

Vorüberlegungen

Folgender Code-Ausschnitt ist ein Beispiel dafür, wie zu den Anfangszeiten des Internet, noch bevor die Möglichkeit CSS zu gebrauchen verbreitet war, Layouts erzeugt wurden.

An diesem Beispiel kann man erkennen, wie eng verwoben die Layoutinformation und der eigentlichen Inhalt der Webseite sind. Jedem Element muss, wenn man es denn von der Standardformatierung abweichend behandeln will, eine Layoutinformation mitgegeben werden. Dies ist auch mit CSS nicht anders, jedoch wird bei der Verwendung von CSS dieses Problem deutlich eleganter gelöst. Die Problematik in diesem Beispiel ist aber vor allem die, dass bei Änderungen von Farben oder Positionen, diese an jeder Stelle im Code gemacht werden müssen. Vor allem bei größeren Websites kann dies mit erheblichem Aufwand verbunden sein.

Was also tun? Wir brauchen eine Möglichkeit Layouts zentral zu definieren, um sie mehrfach verwenden zu können. Die Vermeidung von doppeltem Code hilft zu dem, die zu übertragene Datenmenge schlank und die Dokumente klein zu halten. Was dazu fehlt, ist, eine Möglichkeit zu haben, einmal definierte Stile an den verschiedensten Stellen zu referenzieren. Und genau das bietet uns CSS.

Was leistet CSS?

Es ist nicht Sinn und Zweck dieses Artikels, eine umfassende Erläuterung zu CSS zu geben. Das Wichtigste soll aber an dieser Stelle und grundlegende Überlegungen angestellt werden, die helfen, zu verstehen, wie ein Dokument in idealer Weise aufgebaut ist.

Inline-Definitionen, Identifikatoren, Klassen und Element-Definitionen

Wie nun werden Stile definiert, auf die im Dokument referenziert werden kann?
Hierzu gibt es verschiedene Möglichkeiten.

Inline

Inline-Definitionen werden auf folgende Weise notiert:

Styles, die inline an ein Element gebunden werden unterscheiden sich nicht sehr von der Vorgehensweise im obigen Negativbeispielt. Warum?
Diese Art der Angabe von Style-Informationen macht im Prinzip das gleiche wie im obigen Bespiel, bedient sich aber lediglich dem Mittel CSS. Dies ist ein gutes Beispiel dafür, wie CSS nicht zwangsläufig zu besseren Ergebnissen in Bezug auf die Wartbarkeit oder Übersichtlichkeit des Codes führt. CSS ist also kein Allheilmittel. Vor allem aber nicht dann, wenn es falsch eingesetzt wird.

Eine Möglichkeit, die diese Variante bietet, und bei der sie (gut) eingesetzt werden kann, ist zur Entwicklungszeit. Auf diese Weise lassen sich schnell Dinge probieren und entwickeln, in fertigem Code hat diese Möglichkeit jedoch nichts zu suchen.

Identifikatoren

IDs sind eine Möglichkeit, Elementen eines Dokumentes eindeutige IDs zu geben. Eindeutig bedeutet selbstverständlich, dass diese ID nur ein einziges Mal innerhalb eines Dokumentes verwendet werden darf. So ist es nun möglich eine Definition zu erstellen, die gerade genau für dieses eine Element greift.

Dies ist in sofern ein Fortschritt, als dass nun die Layout-Definition an anderer Stelle als am Element selbst erfolgen kann. Die Kopplung von Inhalt und Layout wird auf diese Weise schon ein wenig aufgebrochen. Des weiteres ist weniger Code direkt am Element notwendig, so dass das Dokument auf diese Weise übersichtlicher wird.

Klassen

Noch einen Schritt weiter gehen Klassen. Klassen stellen, wie der Name schon andeutet, gemeinsame Definitionen für ein Klasse von Elementen zur Verfügung. Alle Elemente, die zu einer Klasse gehören bekommen so dieselben Style-Definitionen zugewiesen.

Das globale Ändern einer Farbe beispielsweise ist so auf einfachere Weise möglich. Die Änderung an einer Stelle in den CSS-Definitionen ändert die Farbe bei allen Elemente, die zu der entsprechenden Klasse gehören.

Die Vermeidung duplizierten Codes wird so vermieden. Es muss also nicht ein und dieselbe Definition an vielen Stellen im Dokument eingefügt werden. Das erleichtert wieder die Handhabung UND fördert nicht zuletzt die Wartbarkeit.

Element-Definitionen

Ähnlich der Klassen funktionieren Element-Definitionen. Diese Defintionen werden über den Namen des (X)HTML-Tags an jedes Element der Seite gebunden. Auf diese Weise ist es möglich, eine Definition zu erstellen, die dokumentweit für alle Elemente des gleichen Namen gilt.

Hier bleibt anzumerken, dass es sicher nicht der beste Weg ist, Style-Informationen in einem Dokument direkt zu notieren. Dies gilt für Identifikatoren und Klassen ebenso wie für Inline- und Elementdefinitionen. Ziel muss es immer sein, den (X)HTML-Code frei von Informationen zu halten, die dem Layout dienen. In der Praxis ist dies schon wegen der diversen Unzulänglichkeiten der verschiedenen Browser nicht immer einfach. Dennoch muss das Ziel klar sein: strikte Trennung von Inhalt und Layout!

Natürlich verfügt CSS über weitere Methoden und Mechanismen, die bei richtiger Verwendung ein mächtiges Werkzeug sind. Selektoren, Vererbung und Vorrangregeln sind hier die Stichworte. Leider würde eine detaillierte Abhandlung darüber den Rahmen dieses Artikels bei weitem sprengen.

Sematik beachten

Jedes HTML-Element hat eine bestimmte Bedeutung. Der durch diesen Tag ausgezeichnete Text erhält durch die richtige Verwendung von HTML-Tags eine bestimmte semantische Bedeutung.

<p></p> zum Beispiel steht für einen Text-Absatz. Die Semantik des in diesem Tag enthaltenen Textes erschließt sich also durch die Auszeichnung mittels <p>. Durch die Verwendung dieses Tags wird der verwendete Text semantisch zu einem Absatz.

Für jeden Zweck gibt es in (X)HTML ein Element, das zur Auszeichnung verwendet werden kann, um eine bestimmte Semantik zu erzeugen. Leider wird dies viel zu oft vernachlässigt. Divitis, also der exzessive und zum Teil semantisch einfach falsche Gebrauch von Bereichen (DIVs), ist ein gutes Beispiel hierfür.

Eine wichtige Regel also ist: Jedes HTML-Element hat seine eigene Semantik, und sollte dieser entsprechend eingesetzt werden!

Ein vollständiges Beispiel

Anhand eines Menüs soll nun gezeigt werden, wie zum einen die strikte Trennung von Design und Information erfolgen kann, zum anderen auch, wie die Semantik der verfügbaren HTML Elemente genutzt werden kann, um diese Trennung durchzusetzen.

Wie man sieht, enthält der Code des Beispiels kaum noch sichtbare Verknüpfungen zu Layout-Informationen. Lediglich id="nav" und das link-Tag stellen noch einen Bezug her. Sucht man nun nach Infomationen darüber, wie die ausgezeichneten Elemente mit Layout-Informationen versehen werden, so ist die referenzierte Stylesheet-Datei der richtige Ort. Hier und nur hier, wird bestimmt, wie der Inhalt layoutet wird.

Genauso wichtig aber ist, dass hier bewusst Wert auf die semantisch korrekte Verwendung von HTML-Tags gelegt wurde. Nimmt man an, dass die Links eines Menüs, egal ob nun in horizontaler oder vertikaler Ausrichtung, einer Liste gleichen, so bietet es sich natürlich an, diese auch mit der Semantik einer Liste zu versehen. Über die Verwendung von Stylesheets ist es nun möglich, dieser Liste das gewünschte Layout zu geben.

Der obige Code ist schlank, übersichtlich aber vor allem leicht zu erfassen. Sicher mag dies ein recht einfache Beispiel sein, jedoch muss dies das Ziel der Bemühungen sein, wenn man die perfekte Webseite entwickeln will.

Teil 5 unserer Artikelreihe 10 Tipps für eine perfekte Webseite trägt den Titel
DIVitis? – Ist meine Webseite krank?. In diesem Artikel wird noch einmal genauer beleuchtet, was der Sinn von (X)HTML eigentlich ist, und welche Bedeutung die semantisch korrekte Verwendung der zur Verfügung stehenden Tags hat.