# DOCTYPE html: Definition und Beispiele Im Quellcode von HTML-Dokumenten und Unterseiten sollte sie am Anfang stehen: Die Kennzeichnung <!DOCTYPE html>. Dank DOCTYPE lässt sich auf den ersten Blick vermitteln, um welchen Dokument-Typ es sich handelt. Fehlt das Tag im Dokument, kann es zu Fehlern in der Darstellung Ihrer Website kommen. ## Was ist DOCTYPE html? Wer mit HTML-Dokumenten arbeitet, kennt <!DOCTYPE html> bereits. Obwohl es nicht zu den klassischen [HTML-Tags](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-tags/ "HTML-Tags") zählt, sollte DOCTYPE html in HTML-Dokumenten an erster Stelle stehen. Noch vor dem eigentlichen 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 wichtigsten Elementen im HTML-Dokument zählt, wird es trotzdem häufig vergessen. Da sein Vorhandensein inzwischen vorausgesetzt wird, sollten Sie nicht vergessen, den Dokument-Typ für jede Seite durch <!DOCTYPE html> zu kennzeichnen. Gute [HTML-Editoren](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-editoren/ "HTML-Editoren") bieten eine Fehlerprüfung an, die auf fehlende DOCTYPE-Zeilen hinweist. --- ### Tipp Während die DOCTYPE-Kennzeichnung den Dokument-Typ verdeutlicht, dient das HTML-Tag [HTML div](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-div/ "HTML div") als leerer Container ohne semantische Bedeutung, den Sie zur Website-Gestaltung mit Skripten und [CSS](https://www.ionos.at/digitalguide/websites/webdesign/was-ist-css/ "Was ist CSS?") frei befüllen können. --- ## Wozu dient DOCTYPE html? Die Aufgabe von DOCTYPE html ist es, Programmierenden sowie Browsern auf den ersten Blick zu erklären, um welche **Document Type Definition (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 beispielsweise für Dateien in **HTML, XHTML, SVG, MathML oder XML**. Wer [HTML lernen](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-lernen-das-grosse-einsteiger-tutorial/ "HTML lernen: Das große Einsteiger-Tutorial") und eine Website erstellen möchte, sollte somit als ersten Schritt <!DOCTYPE html> einfügen. Beim Fehlen der DOCTYPE-Kennzeichnung kann es zur fehlerhaften Darstellung von Websites kommen. Grund dafür ist, dass Browser automatisch in den **„Quirks-Modus“** schalten, wenn <!DOCTYPE html> fehlt. So soll zwar die **Abwärtskompatibilität und Darstellbarkeit von Websites** ohne aktuellen Code-Standard bewahrt werden. Gleichzeitig kann es dadurch jedoch trotz aktuellem Code zur fehlerhaften Darstellung kommen, da Browser sich an veraltete, invalide Code-Elemente halten. --- ### Hinweis Da DOCTYPE kein typisches HTML-Tag im eigentlichen Sinne ist, findet sich hier auch kein abschließendes HTML-Tag mit öffnender Klammer und Schrägstrich (</). Zudem gilt keine Case Sensitivity, Groß- und Kleinschreibung sind also nicht entscheidend. --- ## Welche Arten von DOCTYPE html gibt es? Da DOCTYPE html in [HTML5](https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-html5/ "Was ist HTML5?") nicht auf SGML basiert, ist die Form sehr einfach zu merken. Sie erfordert keine Groß- und Kleinschreibung und steht direkt vor dem ersten HTML-Tag in der ersten Zeile des HTML-Dokuments. Alle Informationen, die ein Browser zum Dokumenttyp und zur Darstellung benötigt, sehen dann so aus: ```none ``` ### Code-Beispiele für ältere HTML-Versionen In Dokumenten, die noch ältere HTML-Versionen wie HTML4 oder XHTML verwenden, sieht der DOCTYPE deutlich komplizierter aus. Aus diesem Grund fügen ihn selbst erfahrene Programmierende oft per Copy-Paste-Verfahren in das HTML-Dokument ein. Die Komplexität liegt daran, dass HTML4 und ältere Code-Sprachen noch auf dem HTML-Vorgänger **SGML (Standarded Generalized Markup Language)** basierten und Browser die genaue Definition des Dokumenttyps benötigten. In Markup-Sprachen, die vor HTML5 kamen, werden folgende DOCTYPE-Codes am Beginn eines HTML-Dokuments verwendet: **XHTML 1.0 Strict:** ```none ``` **XHTML 1.0 Transitional:** ```none ``` **XHTML 1.1 Strict:** ```none ``` Die DOCTYPE-Kennzeichnung für eBooks im EPUB2-Standard sowie ältere [eBook-Formate](https://www.ionos.at/digitalguide/online-marketing/verkaufen-im-internet/e-book-formate/ "E-Book-Formate") erfolgt übrigens ebenfalls noch in XHTML 1.1 Strict am Anfang des XHTML-Dokuments. **HTML 4.01 Strict:** ```none ``` **HTML 4.01 Transitional:** ```none ``` --- ### Hinweis Im Gegensatz zu HTML5 und seinen Vorgängern empfiehlt sich für das [SVG-Format](https://www.ionos.at/digitalguide/websites/webseiten-erstellen/svg-format-einbindung-von-svg-vektorgrafiken/ "SVG-Format: Einbindung von SVG-Vektorgrafiken") – sowohl vor als auch nach SVG 1.2 –, keine DOCTYPE-Kennzeichnung einzufügen, da ab SVG 1.2 keine DTD mehr verwendet wird. --- ## Warum DOCTYPE html wichtig ist Die Angabe von DOCTYPE html ist keine Vorschrift und kann daher in HTML-Dokumenten tatsächlich auch weggelassen werden. Dessen ungeachtet gilt die Angabe des Dokumenttyps als Standard und **inoffizielle Konvention**. Fehlt die Kennzeichnung, wird dies z. B. bei einer Prüfung des HTML-Dokuments als Fehler markiert. Wenn der Browser nicht mit Sicherheit erkennen kann, welche Grammatik und Syntax angewendet wird, können Darstellungsfehler entstehen und die **Funktionalität einer Website** beeinträchtigt werden. Besonders wichtig: Nicht nur am Anfang des Quellcodes eines Webprojekts sollte DOCTYPE stehen. **Jede einzelne Unterseite** im zugehörigen HTML-Dokument sollte über die entsprechende Kennzeichnung verfügen. This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/doctype-html/](https://www.ionos.at/digitalguide/websites/web-entwicklung/doctype-html/) for AI/LLM consumption.