HTML <!DOCTYPE>-Deklaration
Die HTML <!DOCTYPE>-Deklaration aktiviert den Standards Mode, vermeidet Quirks Mode und leitet Dokumente korrekt ein.
Die <!DOCTYPE>-Deklaration ist die allererste Zeile eines HTML-Dokuments. Sie teilt dem Browser mit, in welcher HTML-Version die Seite verfasst ist – und, was heute wichtiger ist, dass die Seite nach Webstandards gerendert werden soll. Es handelt sich dabei nicht um ein HTML-Tag, sondern um eine Anweisung an den Browser.
Diese Seite behandelt den einen Doctype, den Sie verwenden sollten, warum er wichtig ist (Standards Mode vs. Quirks Mode) und einen kurzen Hinweis zu den Legacy-Doctypes, denen Sie in altem Code noch begegnen können.
Der Doctype, den Sie verwenden sollten
Für jedes neue HTML-Dokument verwenden Sie genau diese eine Zeile:
<!DOCTYPE html>Das ist der vollständige HTML5-Doctype. Ein paar Regeln:
- Er muss das erste Element im Dokument sein, noch vor dem
<html>-Tag und vor jedem anderen Inhalt (der Sicherheit halber auch vor einem Kommentar oder einer Leerzeile). - Er ist nicht case-sensitiv –
<!DOCTYPE html>,<!doctype html>und<!Doctype HTML>sind alle gültig. Die Kleinschreibung<!doctype html>ist verbreitet, aber die obige Schreibweise ist die am häufigsten verwendete Konvention. - Es gibt kein schließendes Tag.
Ein minimales, vollständiges Dokument sieht so aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of the document</title>
</head>
<body>
<h2>Elements example</h2>
<p>This is some paragraph.</p>
<p>This is another paragraph <br /> with a line break.</p>
</body>
</html>Um zu erfahren, was nach dem Doctype im Dokument folgt, lesen Sie HTML Basic Tags, das <html>-Tag und das <head>-Tag.
Warum der Doctype wichtig ist: Standards Mode vs. Quirks Mode
Wenn ein Browser eine Seite analysiert, wählt er einen von zwei Rendering-Modi:
- Standards Mode – der Browser folgt den modernen W3C/WHATWG-Spezifikationen. Das ist, was Sie möchten. Layout, das Box-Modell und CSS verhalten sich browserübergreifend konsistent.
- Quirks Mode – der Browser emuliert das fehlerhafte Verhalten von Browsern der späten 1990er Jahre (wie Internet Explorer 5), um sehr alte Seiten nicht zu beschädigen. Dieser Modus wird ausgelöst, wenn der Doctype fehlt, fehlerhaft oder ein alter/unbekannter ist.
Ein korrektes <!DOCTYPE html> schaltet den Browser in den Standards Mode. Lassen Sie es weg, landen Sie im Quirks Mode, in dem sich einige Dinge überraschend anders verhalten:
- Das Box-Modell ist fehlerhaft. Im Quirks Mode umfassen
widthundheightInnenabstand und Rahmen (das alte IE-Box-Modell), sodass eine Box, die Sie auf200pxbemessen haben, breiter oder schmaler als erwartet dargestellt werden kann. line-height,vertical-alignund der Abstand von Inline-Elementen verhalten sich anders und erzeugen häufig zusätzliche Lücken um Bilder und Tabellenzellen.- CSS-Einheiten und Prozentangaben können inkonsistent vererbt und berechnet werden.
Diese Fehler sind schwer zu diagnostizieren, weil Ihr CSS korrekt aussieht – der Modus ist falsch. Das Hinzufügen des Doctypes behebt das Problem, weshalb jedes moderne Dokument damit beginnen sollte.
document.compatMode in der Konsole prüfen: "CSS1Compat" bedeutet Standards Mode, "BackCompat" bedeutet Quirks Mode.Ein Hinweis zu Legacy-Doctypes
Vor HTML5 verwies der Doctype auf eine Document Type Definition (DTD) – eine formale Grammatik, die beschreibt, welche Elemente und Attribute zulässig sind. Diese Deklarationen waren lang und leicht fehlerhaft, zum Beispiel HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">HTML 4.01 gab es in den Varianten Strict, Transitional und Frameset, und XHTML 1.0 / 1.1 fügte mehrere weitere hinzu (wie "-//W3C//DTD XHTML 1.0 Strict//EN"). Diese können Ihnen noch in älteren Codebasen begegnen.
Das Wichtigste: HTML5 ersetzte sie alle durch das einzelne kurze <!DOCTYPE html>. Es ist der kürzeste gültige Doctype, der den Standards Mode zuverlässig auslöst, und es ist der einzige, den Sie heute noch schreiben müssen.