Im Quellcode von HTML-Do­ku­men­ten und Un­ter­sei­ten sollte sie am Anfang stehen: Die Kenn­zeich­nung <!DOCTYPE html>. Dank DOCTYPE lässt sich auf den ersten Blick ver­mit­teln, um welchen Dokument-Typ es sich handelt. Fehlt das Tag im Dokument, kann es zu Fehlern in der Dar­stel­lung Ihrer Website kommen.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

Was ist DOCTYPE html?

Wer mit HTML-Do­ku­men­ten arbeitet, kennt <!DOCTYPE html> bereits. Obwohl es nicht zu den klas­si­schen HTML-Tags zählt, sollte DOCTYPE html in HTML-Do­ku­men­ten an erster Stelle stehen. Noch vor dem ei­gent­li­chen Quelltext zeigt DOCTYPE an, welchen Dokument-Typ ein Browser öffnen soll und welche Code-Syntax und Grammatik verwendet wird. Obwohl das Tag somit zu den wich­tigs­ten Elementen im HTML-Dokument zählt, wird es trotzdem häufig vergessen. Da sein Vor­han­den­sein in­zwi­schen vor­aus­ge­setzt wird, sollten Sie nicht vergessen, den Dokument-Typ für jede Seite durch <!DOCTYPE html> zu kenn­zeich­nen. Gute HTML-Editoren bieten eine Feh­ler­prü­fung an, die auf fehlende DOCTYPE-Zeilen hinweist.

Tipp

Während die DOCTYPE-Kenn­zeich­nung den Dokument-Typ ver­deut­licht, dient das HTML-Tag HTML div als leerer Container ohne se­man­ti­sche Bedeutung, den Sie zur Website-Ge­stal­tung mit Skripten und CSS frei befüllen können.

Wozu dient DOCTYPE html?

Die Aufgabe von DOCTYPE html ist es, Pro­gram­mie­ren­den sowie Browsern auf den ersten Blick zu erklären, um welche Document Type De­fi­ni­ti­on (DTD) es sich handelt und wie eine Website gerendert werden soll. Die DTD zeigt an, welche Code-Sprache auf der Seite bzw. im HTML-Dokument zum Einsatz kommt. Dies gilt bei­spiels­wei­se für Dateien in HTML, XHTML, SVG, MathML oder XML. Wer HTML lernen und eine Website erstellen möchte, sollte somit als ersten Schritt <!DOCTYPE html> einfügen.

Beim Fehlen der DOCTYPE-Kenn­zeich­nung kann es zur feh­ler­haf­ten Dar­stel­lung von Websites kommen. Grund dafür ist, dass Browser au­to­ma­tisch in den „Quirks-Modus“ schalten, wenn <!DOCTYPE html> fehlt. So soll zwar die Ab­wärts­kom­pa­ti­bi­li­tät und Dar­stell­bar­keit von Websites ohne aktuellen Code-Standard bewahrt werden. Gleich­zei­tig kann es dadurch jedoch trotz aktuellem Code zur feh­ler­haf­ten Dar­stel­lung kommen, da Browser sich an veraltete, invalide Code-Elemente halten.

Hinweis

Da DOCTYPE kein typisches HTML-Tag im ei­gent­li­chen Sinne ist, findet sich hier auch kein ab­schlie­ßen­des HTML-Tag mit öffnender Klammer und Schräg­strich (</). Zudem gilt keine Case Sen­si­ti­vi­ty, Groß- und Klein­schrei­bung sind also nicht ent­schei­dend.

Welche Arten von DOCTYPE html gibt es?

Da DOCTYPE html in HTML5 nicht auf SGML basiert, ist die Form sehr einfach zu merken. Sie erfordert keine Groß- und Klein­schrei­bung und steht direkt vor dem ersten HTML-Tag in der ersten Zeile des HTML-Dokuments. Alle In­for­ma­tio­nen, die ein Browser zum Do­ku­ment­typ und zur Dar­stel­lung benötigt, sehen dann so aus:

<!DOCTYPE html>

Code-Beispiele für ältere HTML-Versionen

In Do­ku­men­ten, die noch ältere HTML-Versionen wie HTML4 oder XHTML verwenden, sieht der DOCTYPE deutlich kom­pli­zier­ter aus. Aus diesem Grund fügen ihn selbst erfahrene Pro­gram­mie­ren­de oft per Copy-Paste-Verfahren in das HTML-Dokument ein. Die Kom­ple­xi­tät liegt daran, dass HTML4 und ältere Code-Sprachen noch auf dem HTML-Vorgänger SGML (Stan­dard­ed Ge­ne­ra­li­zed Markup Language) basierten und Browser die genaue De­fi­ni­ti­on des Do­ku­ment­typs be­nö­tig­ten.

In Markup-Sprachen, die vor HTML5 kamen, werden folgende DOCTYPE-Codes am Beginn eines HTML-Dokuments verwendet:

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Tran­si­tio­nal:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Loose//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">

XHTML 1.1 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Die DOCTYPE-Kenn­zeich­nung für eBooks im EPUB2-Standard sowie ältere eBook-Formate erfolgt übrigens ebenfalls noch in XHTML 1.1 Strict am Anfang des XHTML-Dokuments.

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Tran­si­tio­nal:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Hinweis

Im Gegensatz zu HTML5 und seinen Vor­gän­gern empfiehlt sich für das SVG-Format – sowohl vor als auch nach SVG 1.2 –, keine DOCTYPE-Kenn­zeich­nung ein­zu­fü­gen, da ab SVG 1.2 keine DTD mehr verwendet wird.

Warum DOCTYPE html wichtig ist

Die Angabe von DOCTYPE html ist keine Vor­schrift und kann daher in HTML-Do­ku­men­ten tat­säch­lich auch weg­ge­las­sen werden. Dessen un­ge­ach­tet gilt die Angabe des Do­ku­ment­typs als Standard und in­of­fi­zi­el­le Kon­ven­ti­on. Fehlt die Kenn­zeich­nung, wird dies z. B. bei einer Prüfung des HTML-Dokuments als Fehler markiert. Wenn der Browser nicht mit Si­cher­heit erkennen kann, welche Grammatik und Syntax an­ge­wen­det wird, können Dar­stel­lungs­feh­ler entstehen und die Funk­tio­na­li­tät einer Website be­ein­träch­tigt werden.

Besonders wichtig: Nicht nur am Anfang des Quell­codes eines Web­pro­jekts sollte DOCTYPE stehen. Jede einzelne Un­ter­sei­te im zu­ge­hö­ri­gen HTML-Dokument sollte über die ent­spre­chen­de Kenn­zeich­nung verfügen.

Zum Hauptmenü