DOCTYPE: Die erste Zeile jeder HTML-Seite
Ganz oben in jedem HTML-Dokument steht diese unscheinbare Zeile:
<!DOCTYPE html>Sie ist kein HTML-Element, sondern eine Ansage an den Browser: "Behandle dieses Dokument nach den aktuellen Regeln." Ohne sie schaltet der Browser in den sogenannten Quirks Mode, einen Kompatibilitätsmodus der die Fehler und Eigenheiten uralter Browser nachahmt. Dann stimmen plötzlich Abstände nicht mehr, Boxen werden anders berechnet und du suchst stundenlang einen Fehler der gar keiner ist. Deshalb: DOCTYPE immer rein, immer in Zeile 1, davor nichtmal ein Leerzeichen.
Groß, klein, egal?
Die Schreibweise ist dem Browser tatsächlich egal, <!doctype html> funktioniert genauso. Üblich und gut lesbar ist die Variante mit großem DOCTYPE. Such dir eine aus und bleib dabei.
Früher war das ein Ungetüm
Wer alte Seiten im Quelltext anschaut, findet dort Zeilen wie diese:
Historisches Beispiel, heute bitte nicht mehr verwenden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">In der Ära von HTML 4.01 und XHTML verwies der DOCTYPE auf eine sogenannte DTD, ein formales Regelwerk, und es gab gleich mehrere Varianten (Strict, Transitional, Frameset). Kaum jemand konnte sich die Syntax merken, alle haben sie kopiert und ein Tippfehler reichte um im Quirks Mode zu landen. Mit HTML5 wurde das radikal vereinfacht: übrig blieb die kurze Zeile von oben. Einer der besten Aufräum-Momente der Webgeschichte, mehr davon erzählen wir in der HTML-Geschichte im Retro-Bereich.
Das Wichtigste in Kürze
<!DOCTYPE html>ist immer die erste Zeile des Dokuments.- Sie verhindert den Quirks Mode und sorgt für berechenbares Verhaltn.
- Es gibt heute genau einen DOCTYPE, die alten langen Varianten sind Geschichte.
Was passiert eigentlich ohne?
Fehlt der DOCTYPE, schalten Browser in den sogenannten Quirks Mode: einen Kompatibilitätsmodus, der die Fehler und Eigenheiten der 90er-Browser absichtlich nachstellt, damit uralte Seiten nicht zerbrechen. Klingt harmlos, hat aber handfeste Folgen, im Quirks Mode rechnet der Browser zum Beispiel Elementbreiten nach dem alten, falschen Modell (die Geschichte dazu steht beim Box Model), und modernes CSS verhält sich an etlichen Stellen subtil anders. Das Tückische: Die Seite sieht erstmal fast richtig aus, nur eben fast. Wer je eine Stunde einem mysteriösen Layoutfehler hinterhergejagt ist, der sich als fehlende erste Zeile entpuppte, vergisst den DOCTYPE nie wiederr.
Prüfen lässt sich der Modus übrigens in den Entwicklerwerkzeugen: In der Konsole verrät document.compatMode den Zustand, "CSS1Compat" ist der gewünschte Standardmodus, "BackCompat" heißt Quirks. Und der Validator meldet einen fehlenden DOCTYPE sowieso als allererstess.
Weiter im Lernpfad: Der head-Bereich · Zurück: Das Grundgerüst