Websites mit dem richtigen HTML Doctype versehen

Du hast alles richtig gemacht, und doch schaut deine Website in den modernen Browser nicht so aus wie sie sollte. Du hast gültiges XHTML und CSS geschrieben. Du hast für die dynamischen Elemente den W3C-Standard Document Object Model (DOM) benutzt. Und doch, in den Browsern, die all dies unterstützen, wird die Site nicht richtig angezeigt. Ein falscher DOCTYPE könnte der Grund sein. Dieser kleine Artikel enthält die richtigen, funktionierenden DOCTYPEs und erklärt den praktischen Nutzen und Effekt dieses eher abstrakten Tags.

Warum ein HTML DOCTYPE

Ein DOCTYPE informiert nach den Standards für HTML und XHTML den Validator welche Version von (X)HTML du benutzt, und muss ganz am Anfang des Dokuments stehen, vor allen anderen Tags. DOCTYPEs sind eine Schlüsselkomponente von gültigen Websites: ohne sie validierert der Code und das CSS nicht.

Wie in früheren Artikeln auf A List Apart und auf anderen interessanten Sites erwähnt, sind DOCTYPEs fundamental wichtig für korrekte Darstellung und Funktionalität von Webseiten in modernen Browsern wie Mozilla, IE5/Mac und IE6/Win.

Ein gültiger DOCTYPE mit voller Angabe der URI (der kompletten Webadresse) weist diese Browser an, die Webseite im Standard-Modus anzuzeigen, also das (X)HTML, CSS und DOM wie erwartet umzusetzen.

Ein fehlender DOCTYPE, oder ein veralteter oder ohne URI versehener DOCTYPE weist diese Browser hingegen an, die Webseite im «Quirks»-Modus anzuzeigen. Der Browser nimmt dann also an, dass es sich um altmodischen, ungültigen Code handelt, wie in den späten Neunzigern üblich.

So wird der Browser die Webseite in rückwärts-kompatiblem Modus rendern, wird das CSS so umsetzen wie im IE4 üblich, und wird sich auf proprietäres DOM stützen. (IE benutzt ein IE DOM, Mozilla und Netscape 6 benutzen wer-weiss-was.)

Das ist natürlich nicht das Ziel. Aber das ist das, was man bekommt, wenn man die DOCTYPE-Fehler begeht, die dieser Artikel zu korrigieren versucht.

Anmerkung: Opera spielt hier leider nicht mit, dieser Browser versucht immer die Webseiten im Standard-Modus darzustellen (Gut so, Opera!). Andererseits bietet Opera keine solide Unterstützung für das W3C DOM. Die Opera Software ASA arbeitet daran.

Anmerkung Februar 2003: mittlerweile ist Opera 7 erschienen mit guter DOM-Unterstützung.

Wo sind denn nun all die DOCTYPEs?

Weil DOCTYPEs fundamental wichtig sind für sauberes Funktionieren von Webstandards in den Browsern, und weil das W3C der Haupterschaffer der Webstandards ist, könnte man meinen, dass die W3C-Website eine Liste mit den korrekten DOCTYPEs anbietet und dass diese Liste einfach und schnell zu finden ist. Aber dem Letzteren ist nicht so.

W3.org ist nicht A List Apart, WebReference oder Webmonkey. W3.org wurde nicht für Webdesigner und Entwickler entworfen. Unterstützung für solche Leute ist nicht deren Aufgabe.

Das W3C hat zwar eine Reihe von Tutorials entworfen und veröffentlicht, doch die kennen die meisten Webworker nicht. Zur Hauptsache jedoch veröffentlicht das W3C Vorschläge, Entwürfe und Empfehlungen, geschrieben von Geeks für Geeks. Mit Geeks sind keine gewöhnlichen Webworker gemeint, sondern Geeks, die den Rest von uns aussehen lassen wie Omi, als sie ihr erstes E-Mail empfangen hat.

Man kann den ganzen Tag damit verbringen, auf w3.org eine Seite mit einer Liste aller DOCTYPEs zu suchen ohne eine zu finden. Und wenn man dann doch einen DOCTYPE findet, dann ists häufig auch noch einer, der einem nichts nützt.

Über die ganze Website verteilt findet man Doctypes ohne URI und Doctypes mit relativen Pfaden auf die W3C-Site im URI. Benutzt man solche Doctypes auf der eigenen Website, zeigen diese URI auf ein nicht-existierendes Dokument, was alle gut gemeinten Bemühungen zunichte macht und jeden Browser fehlleitet.

Ein Beispiel. Viele Seiten benutzen den folgenden DOCTYPE, direkt ab w3.org kopiert und benutzt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

Ein Blick auf den letzten Teil des DOCTYPEs (“DTD/xhtml1-strict.dtd”) zeigt einen relativen Pfad zu einem Dokument auf der W3C-Site. Weil dieses Dokument auf dem W3C-Server liegt und nicht auf deinem eigenen, ist dieser Pfad nutzlos für den Browser. Den richtigen DOCTYPE, den du in diesem Fall benutzen würdest, wäre:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Dieser DOCTYPE enthält eine komplette URI. Weil dieser Tag eine gültige Adresse im Web angibt, weiss der Browser, wo die Definition zu finden ist und wird die Seite im Standard-Modus anzeigen.

DOCTYPEs, die funktionieren

Also, welche DOCTYPEs sollten wir benutzen? Schön, dass du fragst. Die folgende vollständige Liste der DOCTYPEs, die wir benötigen:

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Die nächsten Schritte

Wie kannst du mithelfen, die Unterstützung für Webstandards zu fördern? Neben dem Bookmark setzen für diese Seite (und die DOCTYPEs zu kopieren und zu benutzen für deine eigene Website) solltest du die DOCTYPEs, die dein Editor einsetzt (falls er das überhaupt macht) überprüfen und nötigenfalls korrigieren.

Einige Software-Hersteller haben, zwar mit guten Absichten, die unvollständigen DOCTYPEs von der W3C-Website in ihre Software eingebaut, mit dem Resultat, dass die Browser in den Quirks-Modus gehen, wenn sie auf solche automatisch eingefügten DOCTYPEs stossen. Das ist nicht das, was du willst.

Nötigenfalls hilft eine höfliche Nachricht an den Software-Hersteller mit der Bitte, im nächsten Upgrade korrekte DOCTYPEs zu unterstützen. Dreamweaver 4 lässt sich modifizieren, was in einem weiteren Artikel von A List Apart beschrieben wid (Dreamweaver MX bietet volle Untersützung von Haus aus).

Demnächst

Es gibt gute Gründe anzunehmen, dass das W3C bald eine praktische und einfach zu findende Liste der DOCTYPEs bereitstellen wird.

Aktualisierung April 2003: mittlerweile ist genau das geschehen. Das W3C hat ein solche Liste veröffentlicht, die Adresse ist: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Karl Dubost, Conformance Manager des W3C Quality Assurance Teams, hat am Original dieses Artikels mitgearbeitet.

Das Webstandards Project wurde kürzlich reaktiviert und enthält ebenfalls alle diese Informationen (in Englisch).

Viel Spass beim Schreiben und Validieren!

Info: Dieser Artikel ist eine Übersetzung des Originals auf A List Apart und richtet sich an Webdesigner, die sich an die W3C-Standards halten wollen.

Leave a Reply

Your email address will not be published. Required fields are marked *