<!DOCTYPE html>
Zuletzt aktualisiert am 4. Februar 2026
<!DOCTYPE html> ist kein HTML-Element, sondern eine Deklaration: eine Anweisung an den Browser, die sagt: “Dieses Dokument ist HTML5, bitte rendere es nach dem aktuellen Standard.” Ohne diese Zeile fällt der Browser in den sogenannten Quirks-Modus zurück und interpretiert CSS und Layout-Regeln nach veralteten Regeln aus den 90er-Jahren. Das willst du nicht.
Grundlagen
Die DOCTYPE-Deklaration hat eine lange Geschichte. In HTML 4.01 und XHTML musste man ellenlange Zeichenketten mit DTD-Referenzen angeben. HTML5 hat das radikal vereinfacht: <!DOCTYPE html>, das war’s.
<!DOCTYPE html>ist kein HTML-Tag und kein Element, sondern eine Anweisung an den Parser- Es muss die allererste Zeile im Dokument sein, noch vor dem
<html>-Tag - Davor darf nichts stehen: kein Kommentar, kein Leerzeichen (ein BOM am Dateianfang wird vom Parser toleriert, ist aber zu vermeiden)
- Die Deklaration ist case-insensitive:
<!DOCTYPE html>,<!doctype html>und<!Doctype HTML>sind alle gültig - Es gibt keinen schließenden Tag: die Deklaration steht allein
- HTML5 benötigt keine DTD-Referenz mehr, der kurze DOCTYPE reicht
- Fehlt der DOCTYPE, schaltet der Browser in den Quirks-Modus: Box-Model, Tabellen-Layout und viele CSS-Eigenschaften verhalten sich dann anders als erwartet
Syntax
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine Seite</title>
</head>
<body>
<p>Inhalt der Seite</p>
</body>
</html>Quirks-Modus vs. Standards-Modus
Der Browser kennt drei Rendering-Modi, die er anhand des DOCTYPEs bestimmt:
Standards-Modus (gewünscht): Der Browser rendert die Seite nach den aktuellen CSS- und HTML-Spezifikationen. <!DOCTYPE html> aktiviert diesen Modus.
Quirks-Modus (problematisch): Ohne DOCTYPE oder mit einem veralteten DOCTYPE schaltet der Browser in diesen Modus. Er emuliert dann das Verhalten von Browsern aus den späten 90ern. Das betrifft vor allem das Box-Model: Im Quirks-Modus berechnet der Browser width und height inklusive Padding und Border, ähnlich wie box-sizing: border-box, aber mit vielen zusätzlichen Eigenheiten.
Almost Standards-Modus: Ein Zwischenmodus, der bei bestimmten älteren DOCTYPEs greift. Er verhält sich fast wie der Standards-Modus, mit einer Ausnahme bei der vertikalen Größenberechnung von Tabellenzellen mit Bildern.
Beispiele
HTML5-Dokument-Grundgerüst
Das minimale, vollständige HTML5-Dokument. Der DOCTYPE steht ganz oben, gefolgt vom <html>-Element mit Sprachangabe.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Meine erste Seite</title>
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Diese Seite wird im Standards-Modus
gerendert.</p>
</body>
</html>Historische DOCTYPEs im Vergleich
Früher waren DOCTYPEs deutlich länger und komplizierter. Hier der Vergleich: Du siehst sofort, warum HTML5 eine Erleichterung war.
<!-- HTML5 (aktuell) -->
<!DOCTYPE html>
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">In der Praxis gibt es keinen Grund mehr, einen anderen DOCTYPE als <!DOCTYPE html> zu verwenden. Die alten Varianten sind nur noch für die Wartung bestehender Legacy-Projekte relevant.
Barrierefreiheit
Der DOCTYPE selbst hat keine direkte Auswirkung auf die Barrierefreiheit: Er wird weder von Screenreadern vorgelesen noch hat er eine semantische Bedeutung für assistive Technologien.
Indirekt ist er aber entscheidend: Ohne korrekten DOCTYPE schaltet der Browser in den Quirks-Modus, und das kann Layouts zerstören. Wenn ein Layout bricht, werden Inhalte möglicherweise überlagert, abgeschnitten oder in der falschen Reihenfolge dargestellt. Das betrifft alle Nutzer, aber besonders diejenigen, die auf konsistente Seitenstruktur angewiesen sind, etwa Nutzer von Screenreadern oder Vergrößerungssoftware.
Häufige Fehler
DOCTYPE vergessen: Ohne DOCTYPE rendert der Browser im Quirks-Modus. Das fällt oft erst auf, wenn das Layout auf einem anderen Browser anders aussieht oder wenn CSS-Eigenschaften wie box-sizing sich unerwartet verhalten. Immer als erste Zeile setzen.
Etwas vor den DOCTYPE schreiben: Ein HTML-Kommentar, ein Leerzeichen oder eine PHP-Ausgabe vor dem DOCTYPE kann den Browser in den Quirks-Modus zwingen. Die Deklaration muss wirklich das Allererste sein, was der Browser sieht. (Ein BOM am Dateianfang wird vom HTML-Parser zwar übersprungen und löst keinen Quirks-Modus aus, sollte aber trotzdem vermieden werden.)
Den DOCTYPE im <head> platzieren: Der DOCTYPE gehört vor das <html>-Element, nicht hinein. Er ist keine Meta-Information, sondern eine Anweisung an den Parser, die vor dem eigentlichen Dokument steht.
Veraltete DOCTYPEs in neuen Projekten verwenden: Manchmal kopieren Entwickler Boilerplate-Code aus alten Projekten und übernehmen dabei einen HTML-4.01- oder XHTML-DOCTYPE. Für neue Projekte ist <!DOCTYPE html> immer die richtige Wahl.
Browser-Kompatibilität
Die HTML5-DOCTYPE-Deklaration wird von allen Browsern erkannt, auch von sehr alten Versionen. Da der DOCTYPE absichtlich so kurz und einfach gehalten wurde, gibt es keine Kompatibilitätsprobleme.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Chrome | Komplett | Seit Version 1 |
| Firefox | Komplett | Seit Version 1 |
| Safari | Komplett | Seit Version 1 |
| Edge | Komplett | — |
| Opera | Komplett | — |
Email-Kompatibilität
In HTML-E-Mails ist der DOCTYPE besonders wichtig, weil er das Rendering-Verhalten von Email-Clients beeinflusst, vor allem bei Outlook.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Apple Mail | Komplett | Respektiert den DOCTYPE und rendert im Standards-Modus. |
| Gmail | Teilweise | Gmail entfernt den DOCTYPE und verwendet einen eigenen. Das Rendering ist dennoch konsistent. |
| Outlook | Teilweise | Outlook (Windows) verwendet die Word-Rendering-Engine und ignoriert den DOCTYPE weitgehend. Das Layout sollte trotzdem mit DOCTYPE getestet werden. |
| Thunderbird | Komplett | Respektiert den DOCTYPE wie ein normaler Browser. |
| Yahoo Mail | Teilweise | Yahoo Mail entfernt den DOCTYPE und setzt einen eigenen. Inline-Styles verwenden. |
Verwandte Elemente
Bleib auf dem Laufenden
Erhalte neue Inhalte direkt in dein Postfach
Was erwartet dich?
Neue Artikel & Videos
Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.
Plattform & Kurs-Updates
Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.
Einmal die Woche in deinem Postfach
Kurz, auf den Punkt, kein Spam.