Ausführbare HTML-Docs: Doctype

Q: Spielt Groß- und Kleinschreibung beim Doctype eine Rolle?

Nein. , und bedeuten alle dasselbe. Am verbreitetsten ist DOCTYPE in Großbuchstaben mit kleinem html.

Q: Wie prüfe ich, ob eine Seite im Quirks-Modus läuft?

Öffne die Browserkonsole und führe document.compatMode aus. "CSS1Compat" bedeutet Standardmodus (oder eingeschränkter Quirks-Modus), "BackCompat" bedeutet Quirks-Modus.

Was `<!DOCTYPE html>` ist

<!DOCTYPE html> ist die Doctype-Deklaration: die erste Zeile einer HTML-Datei, vor dem <html>-Tag. Sie sagt dem Browser „das ist ein modernes HTML-Dokument“, und der Browser stellt die Seite daraufhin im Standardmodus dar, also nach den aktuellen HTML- und CSS-Spezifikationen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>The doctype is the very first line of this file.</p>
</body>
</html>

Diese eine Zeile ist der komplette HTML5-Doctype. Sie hat kein schließendes Tag, und in sie kommt nichts weiter hinein.

Syntaxregeln

Er steht ganz oben. Davor dürfen nur Leerraum und Kommentare stehen. Text oder ein Tag vor dem Doctype sorgt dafür, dass der Browser ihn ignoriert.
Groß- und Kleinschreibung ist egal. <!DOCTYPE html> und <!doctype html> sind identisch. Entscheide dich für eine Schreibweise und bleib dabei.
Er ist kein Element. Es gibt kein </!DOCTYPE>, und du kannst ihm keine class oder andere Attribute geben.
Das Wort nach DOCTYPE muss html sein. <!DOCTYPE html5> ist keine neuere Version; der Browser behandelt die Seite dann so, als hätte sie keinen gültigen Doctype.
Einer pro Dokument. Auch Seiten, die aus mehreren Dateien zusammengesetzt werden (Templates, Includes), geben im fertigen HTML nur einen Doctype ganz oben aus.

Standardmodus und Quirks-Modus

Browser haben drei Darstellungsmodi, und der Doctype wählt einen davon aus:

Modus	Ausgelöst durch	Was sich ändert
Standardmodus	`<!DOCTYPE html>` und andere moderne Doctypes	Alles folgt den aktuellen Spezifikationen
Eingeschränkter Quirks-Modus	HTML 4.01 Transitional oder Frameset mit URL, XHTML 1.0 Transitional oder Frameset	Fast Standard: Nur eine Regel zur Zeilenhöhe weicht ab, deshalb hat ein Bild allein in einer Zeile (typischerweise in einer Tabellenzelle) keine Lücke darunter
Quirks-Modus	Kein Doctype, ein falsch geschriebener oder einige alte wie HTML 4.01 Transitional ohne URL	Ahmt Browser der 1990er nach: Prozenthöhen, Textgröße in Tabellen und Zeilenhöhen verhalten sich anders

Den Quirks-Modus gibt es, damit Seiten aus der Zeit vor den Webstandards noch so aussehen, wie ihre Autoren sie gesehen haben. Bei neuen Seiten macht er nur Ärger: Ein height: 100%, das auf einer Seite funktioniert und auf einer anderen nicht, oder Tabellen, die deine Schriftgröße ignorieren, sind klassische Anzeichen für einen fehlenden Doctype.

Die Editor-Vorschauen auf dieser Seite laufen immer im Standardmodus, du siehst dort also keinen Quirks-Modus, wenn du einen Doctype löschst. Der Prüfer unten verwendet DOMParser, der dieselben Regeln anwendet wie Browser beim Laden einer Datei. Bearbeite den Doctype im Textfeld, und der Modus aktualisiert sich:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype checker</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    textarea { width: 100%; height: 70px; font: 14px monospace; }
    #mode { font-weight: bold; padding: 8px 12px; border-radius: 6px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label for="src">First line of a document:</label>
  <textarea id="src"><!DOCTYPE html></textarea>
  <p>Rendering mode: <span id="mode"></span></p>
  <script>
    const src = document.getElementById('src');
    const mode = document.getElementById('mode');
    function check() {
      const doc = new DOMParser().parseFromString(src.value + '<p>x</p>', 'text/html');
      const standards = doc.compatMode === 'CSS1Compat';
      mode.textContent = standards ? 'standards (CSS1Compat)' : 'quirks (BackCompat)';
      mode.style.background = standards ? '#dcfce7' : '#fef3c7';
    }
    src.addEventListener('input', check);
    check();
  </script>
</body>
</html>

Lösch die Zeile, tipp <!DOCTYPE html5> oder setz ein Wort vor den Doctype: Jede dieser Änderungen schaltet das Ergebnis auf Quirks um.

Alte Doctypes: HTML 4.01 und XHTML

Vor HTML5 verwies ein Doctype mit einem langen Public Identifier auf eine DTD-Datei. Ganz oben auf älteren Seiten findest du sie noch:

<!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 XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Browser haben diese DTD-Dateien nie heruntergeladen. Sie lesen nur den Identifier, um einen Modus zu wählen: HTML 4.01 Strict und XHTML 1.0 Strict ergeben den Standardmodus, die Transitional-Versionen den eingeschränkten Quirks-Modus, und HTML 4.01 Transitional ohne URL den vollen Quirks-Modus. Füg einen davon in den Prüfer oben ein, um es zu testen. Beachte, dass compatMode den eingeschränkten Quirks-Modus als CSS1Compat meldet, also mit demselben Wert wie den Standardmodus; nur der volle Quirks-Modus erscheint als BackCompat.

Einen alten Doctype durch <!DOCTYPE html> zu ersetzen, ist bei Seiten, die schon im Standardmodus laufen, unbedenklich. Eine Seite, die im Quirks-Modus lief, kann sich leicht verschieben (meist Höhen und Lücken unter Bildern), schau sie dir nach der Änderung also genau an.

Der Doctype im DOM

Der Doctype wird zu einem DocumentType-Knoten, getrennt vom <html>-Element. Skripte lesen ihn über document.doctype, und document.compatMode meldet den Modus, in dem die Seite gelandet ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.doctype</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>doctype name: <code id="name"></code></p>
  <p>compatMode: <code id="compat"></code></p>
  <p>first child of document: <code id="first"></code></p>
  <script>
    const dt = document.doctype;
    document.getElementById('name').textContent = dt ? dt.name : 'none';
    document.getElementById('compat').textContent = document.compatMode;
    document.getElementById('first').textContent = document.firstChild.constructor.name;
  </script>
</body>
</html>

document.compatMode ist der schnellste Weg, eine beliebige Live-Seite zu prüfen: Öffne die Browserkonsole und tipp es ein. "CSS1Compat" bedeutet Standardmodus (oder eingeschränkter Quirks-Modus), "BackCompat" bedeutet Quirks-Modus.

Ein vollständiges HTML5-Grundgerüst

Der Doctype ist ein Teil des minimalen Dokuments, mit dem jede Seite beginnen sollte. Jede Zeile unten hat eine Aufgabe:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter page</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    li code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>Starter page</h1>
  <ul>
    <li><code>&lt;!DOCTYPE html&gt;</code> turns on standards mode</li>
    <li><code>lang="en"</code> names the page language</li>
    <li><code>charset="utf-8"</code> makes accented letters and emoji display correctly</li>
    <li><code>viewport</code> makes the page fit phone screens</li>
    <li><code>&lt;title&gt;</code> is the text on the browser tab</li>
  </ul>
</body>
</html>

Das lang-Attribut und das Meta-Viewport-Tag haben jeweils eine eigene Seite.

Häufige Fehler

Etwas steht vor dem Doctype. Ein verirrtes Zeichen, ein Debug-echo aus einem Serverskript oder ein HTML-Tag über <!DOCTYPE html> versetzt die ganze Seite in den Quirks-Modus. Kommentare und Leerzeilen sind in Ordnung.
Eine Version erfinden. <!DOCTYPE html5> oder <!DOCTYPE HTML 5> sind ungültig und lösen den Quirks-Modus aus. Der HTML5-Doctype ist einfach <!DOCTYPE html>.
Ihn schließen. <!DOCTYPE html></!DOCTYPE> ist kein gültiges HTML. Die Deklaration hat kein End-Tag.
Ihn in kleinen Testdateien weglassen. Layoutfehler, die du in einer Testdatei ohne Doctype jagst, gibt es auf der echten Seite vielleicht gar nicht, und umgekehrt.
Einen alten Transitional-Doctype behalten. Er versetzt die Seite ohne jeden Nutzen in den eingeschränkten Quirks-Modus. Wechsle zu <!DOCTYPE html>.

Häufig gestellte Fragen

Was macht <!DOCTYPE html>?

Es sagt dem Browser, dass die Seite ein modernes HTML-Dokument ist, und er stellt sie deshalb im Standardmodus dar. Ohne Doctype fällt der Browser in den Quirks-Modus zurück, der Fehler von Browsern der späten 1990er nachahmt und die Berechnung mancher Layouts und Höhen verändert.

Ist <!DOCTYPE html> Pflicht?

Die Seite lädt auch ohne, aber der HTML-Standard verlangt ihn, und Browser stellen die Seite dann im Quirks-Modus dar. Schreib <!DOCTYPE html> immer in die erste Zeile.

Spielt Groß- und Kleinschreibung beim Doctype eine Rolle?

Nein. <!DOCTYPE html>, <!doctype html> und <!DocType HTML> bedeuten alle dasselbe. Am verbreitetsten ist DOCTYPE in Großbuchstaben mit kleinem html.

Ist DOCTYPE ein HTML-Tag?

Nein. Es ist eine Deklaration, kein Element: Es hat kein schließendes Tag, du kannst keine Attribute hinzufügen, und es erscheint nicht in document.body. Im DOM ist es ein eigener DocumentType-Knoten, erreichbar über document.doctype.

Wie lautet der Doctype für HTML5?

<!DOCTYPE html>. HTML5 hat die langen Public Identifier und URLs von HTML 4.01 und XHTML abgeschafft, und die kurze Form ist der einzige Doctype, den du für neue Seiten brauchst.

Wie prüfe ich, ob eine Seite im Quirks-Modus läuft?

Öffne die Browserkonsole und führe document.compatMode aus. "CSS1Compat" bedeutet Standardmodus (oder eingeschränkter Quirks-Modus), "BackCompat" bedeutet Quirks-Modus.

Verwandte Konzepte