Die Zeit ist reif für CSS und valides HTML

HTML hat sich als betriebssystem-unabhängige Sprache des Internets in den letzten Jahren zum weitverbreitetsten Dateiformat der Welt entwickelt. Ein sauber geschriebenes HTML-Dokument kann mit jedem Browser auf jedem Computer (oder einem anderen Ausgabegerät) unter jedem Betriebssystem dargestellt werden.

Dabei ist es weder eine Programmiersprache noch eine Seitenbeschreibungs-Sprache, obwohl viele Webdesigner das gerne so hätten. Es ist eine Textauszeichnungs-Sprache, die logische Elemente einer Webseite wie Überschriften, Absätze, Tabellen oder Grafiken darstellen kann. Sie beschreibt, was dargestellt werden soll, nicht wie die verschiedenen Browser die Seite anzeigen. HTML sollte und kann nie das Aussehen einer Webseite eindeutig festlegen.

Wie bekommt man HTML jetzt dazu, ein vom Designer gewünschtes Layout anzuzeigen? Zunächst benutzte man dafür Tabellen, nicht um tabellarische Daten darzustellen, sondern um Texte und Bilder auf einer Seite anzuordnen. Alle gängigen Browser unterstützen inzwischen auch stark verschachtelte Tabellen ziemlich sicher - auf einem normalen Computer-Bildschirm. Doch es gibt auch andere Darstellungsmedien wie Web-TV, Palm, Pocket-PC, PDA, Organizer, Smartphones, WAP- und UMTS-Handy, ein Display im Auto, Vorlesegeräte, Webrobots etc., die immer mehr an Bedeutung gewinnen. Und hier ist das Tabellen-Design am Ende. Was auf einem 21"-Monitor gut aussehen mag, ist auf einem Handy-Display nicht mehr darstellbar. Und wie soll ein Lesegerät eine Design-Tabelle in Sprache umsetzen: wo fängt ein Text an und wo geht er weiter?

Die Macht von CSS

Und hier kommt CSS ins Spiel, die Cascading Style Sheets. Wer mag, kann einen Blick in die HTML-Datei dieser Webseite werfen: in ihr stehen ausschließlich die Texte und Bilder, die hier zu lesen sind. Wie genau sie dargestellt werden, in welcher Größe, Schriftart, Farbe und Anordnung und vor welchem Hintergrund steht in einer eigenen Datei, der CSS-Datei, die für alle Seiten meiner Website Verwendung findet. Das ist kompliziert? Nein, im Gegenteil. Es macht die HTML-Seite einfacher lesbar und damit auch leicht veränderbar. Alle modernen Webdesign-Programme unterstützen CSS inzwischen recht gut. Will ich jetzt das Aussehen aller meiner Seiten ändern, genügt ein einfacher Eingriff in eine CSS-Datei und alles sieht anders aus.

Auf diesem Prinzip ruht mein Style Switcher: Mit einem einfachen Klick tauscht man die CSS-Datei aus, die für das Design zuständig ist, und schon erscheint die Seite in einem vollkommen anderen Layout. Alle Texte und Bilder bleiben natürlich unverändert. Man kann übrigens auch das Stylesheet komplett deaktivieren und diese Seite pur ohne alle Formatierung ansehen. Ein erneuter Klick auf den Link oder eine Aktualisierung dieser Seite bringt das normale Aussehen zurück. Probiere es ruhig aus! Das ist die Macht der Stylesheets.

Meine Layouts gefallen alle nicht? Das mag sein, ich bin kein Grafiker. Dann besuche mal den css Zen Garden, der mit einer einzigen HTML-Seite und hunderten von Design-Alternativen die Vorteile der CSS-Gestaltung in voller Pracht und Schönheit präsentiert.

Die strikte Trennung von Inhalten und Formatierungsangaben auf meinen Seiten hat noch einen weiteren positiven Effekt: Suchmaschinen lieben mich. Sie müssen sich nicht mehr durch verschachtelte Tabellen und eine wüste Format-Tag-Suppe wühlen um die verwertbaren Informationen zu finden, sondern sie bekommen sie ganz einfach unverfälscht vorgesetzt. Das belohnen sie durch eine gute Platzierung. Probiere es ruhig aus und befrage Tante Google nach CSS Tipps, Style Switcher, Bookmarklets, Firefox Erweiterungen oder sogar Latein, stets wirst du mich ganz weit oben finden, obwohl es hunderttausende anderer Seiten gibt, die teilweise viel wichtigere Dinge zu sagen haben als ich. Aber die benutzen eben kein CSS zum Gestalten ihrer Informationen.

Warum korrektes HTML und CSS wichtig sind

Nachdem der Internet Explorer in der Version 5 und älter und Netscape 4 inzwischen weitgehend ausgestorben sind, können alle gängigen Browser alle Webseiten sauber und weitgehend einheitlich darstellen - wenn diese die vereinbarten HTML- und CSS-Standards einhalten und auf Formatierungen verzichten, die in den Anfangszeiten des Webs auf einzelne Browser beschränkt waren. Die Angabe "Diese Seite ist optimiert für..." ist heute nur noch ein Zeichen für veraltete und unsaubere Webseiten.

Dennoch sind die Browser relativ fehlertolerant und versuchen auch solche Webseiten darzustellen, die unbekannte, fehlende, fehlerhafte oder veraltete Angaben enthalten. Was ein Browser nicht kennt, ignoriert er einfach, der Rest wird so gut wie möglich angezeigt. Dieses "so gut wie möglich" ist jedoch nicht immer das, was der Webdesigner beabsichtigte. Und vor allem: jeder Browser reagiert auf Macken anders und stellt die Seite eventuell vollkommen unterschiedlich dar.

Alle gängigen Browser besitzen deshalb heute zwei Darstellungs-Modi, die sie zur Anzeige einer Webseite verwenden. Im Standard Mode wird sauberes, den Standards entsprechendes HTML dargestellt, wenn die Seite dieses in der Dokumententyp-Angabe mitteilt. Solche Seiten sehen dann in allen gängigen Ausgabeprogrammen weitgehend gleich aus. Daneben gibt es noch den Quirks Mode, den "Macken-Modus", der automatisch dann gewählt wird, wenn der Browser keinen Dokumententyp entdecken kann. Wie er eine solche Seite darstellt, ist ihm selbst überlassen und deckt sich nicht unbedingt mit dem anderer Programme. Mehr dazu in meinen Tipps zum richtigen Doctype.

Noch mehr Probleme bekommt ein Browser jedoch durch Webseiten, die durch die Doctype-Angabe behaupten, dem in der DTD (Document Type Deklaration) definierten Standard zu entsprechen, es in Wirklichkeit aber nicht tun. Auch hier ist das Ergebnis in vielen Fällen ganz anders als vom Ersteller vorgesehen. Die meisten sogenannten Browserfehler beruhen schlicht auf fehlerhaftem, nicht gültigem HTML-Code oder invaliden CSS-Angaben. Dabei ist es sehr einfach, die Einhaltung der Webstandards, die Validität, von HTML-Seiten und CSS-Dateien zu erreichen, gibt es doch schnelle und kostenlose Online-Dienste, die dieses überprüfen, jeden Fehler aufzeigen und kommentieren. Die Adressen stehen in meinen Tipps zur Überprüfung der Validität von Webseiten.

Ob meine Webseiten den HTML- und CSS-Standards entsprechen, kann man ganz einfach feststellen: Am Fuß jeder Seite befinden sich zwei Buttons, sie sind verlinkt zu den Validatoren des W3C, dem WWW-Konsortium, das die Webstandards festlegt. Ein Klick darauf führt zur Prüfung, ob diese Seite valide oder fehlerhaft ist.

siehe auch

HTML oder XHTML?
Die Zeit ist reif für CSS und XHTML (veraltete Version von 2002)