<!DOCTYPE html>

<!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.

Steckbrief <!DOCTYPE html>

Kategorie: Grundstruktur
Art: Metadaten
Beispiele: 2
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 04.02.2026

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

2 Beispiele

Das minimale, vollständige HTML5-Dokument. Der DOCTYPE steht ganz oben, gefolgt vom <html>-Element mit Sprachangabe.

index.html

HTML5-Grundgerüst

<!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>

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

4 Fehler

01 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.

02 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.)

03 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.

04 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

5 von 5

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.

Chrome

Komplett

Seit Version 1
Firefox

Komplett

Seit Version 1
Safari

Komplett

Seit Version 1
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

In HTML-E-Mails ist der DOCTYPE besonders wichtig, weil er das Rendering-Verhalten von Email-Clients beeinflusst, vor allem bei Outlook.

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.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da