skip to main content

Oliver Bertschinger

PR-Fachmann, M.Sc.

Websites mit dem richtigen Doctype versehen

Dieser Artikel ist eine von Oliver Bertschinger verfasste Übersetzung des am 12. April 2002 auf A List Apart publizierten Originals «Fix Your Site With the Right DOCTYPE!», und ist auch im Jahr 2014 immer noch von unveränderter Gültigkeit. Er richtet sich an Webdesigner, die sich an die W3C-Standards halten wollen. Seine hier vorliegende Übersetzung wurde veröffentlicht mit freundlicher Genehmigung des Autors des Originals, Jeffrey Zeldman, vom 18. Juli 2002. Diese Übersetzung war ursprünglich unter dieser Adresse veröffentlicht, die nicht mehr Gültigkeit hat:
http://puredesign.ch/lounge/artikel/doctype.shtml

> Direkt springen zu: «Doctypes, die funktionieren»

Du hast alles richtig gemacht, und doch schaut deine Website in den modernen Browsern 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 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 validiert 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.

Wo sind denn nun all die Doctypes?

Weil Doctypes fundamental wichtig für das saubere Funktionieren von Webstandards in den Browsern sind, 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 ihre erste 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 ist es 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. Das ist die vollständige Liste der Doctypes, die wir benötigen:

Aktualisierung: HTML 5. Der Doctype für HTML 5 ist tatsächlich so simpel wie nachstehend dargestellt.

HTML 5

<!DOCTYPE html>

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 Setzen eines Bookmarks 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 (Ab Version MX bietet Dreamweaver volle Unterstü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!

Weitere Artikel und Themen

BCC nutzen

E-Mails haben längst den Weg in den Alltag gefunden. Der richtige Umgang mit Ihnen noch nicht. Viele kennen die Möglichkeit für einen Blindkopie-Versand nicht. Dieser Artikel klärt auf, wie die Blind Carbon Copy, kurz BCC, genutzt wird. Dieser Artikel erschien im Original im August 2003, und er ist auch im Jahr 2013 von unveränderter Gültigkeit.

E-Mail: die Blind Carbon Copy (Blindkopie, BCC)

Spam vermeiden

Als Spam bezeichnet man unerwünscht zugesandte Werbe-E-Mails. Wer sich im Internet bewegt oder eine eigene Website hat, auf der eine E-Mail-Adresse angegeben ist, wird früher oder später von Spam belästigt. Dagegen lässt sich etwas unternehmen. Dieser Artikel erschien im Original im Oktober 2002 und wurde im September 2010 aktualisiert.

Die Spam-Flut bewältigen