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.
Günstige Webhosting-Pakete von IONOS!
Vertrauen Sie auf flexibel skalierbares und zuverlässiges Webhosting inklusive persönlichem Berater mit IONOS!
Was ist DOCTYPE html?
Wer mit HTML-Dokumenten arbeitet, kennt <!DOCTYPE html> bereits. Obwohl es nicht zu den klassischen 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 bieten eine Fehlerprüfung an, die auf fehlende DOCTYPE-Zeilen hinweist.
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 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.
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 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:
<!DOCTYPE html>
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional:
<!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-Kennzeichnung 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 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Im Gegensatz zu HTML5 und seinen Vorgängern empfiehlt sich für das SVG-Format – 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.
Ähnliche Artikel
CSS-Befehle: Häufig verwendete Anweisungen
CSS-Befehle sorgen im Zusammenspiel mit HTML für das Aussehen einer Website. Dabei sind Inhalte von der Gestaltung getrennt. Einige Befehle werden immer wieder gebraucht und sollten sauber im Code der CSS-Datei eingearbeitet sein. Welche sind das? Wie ist deren Syntax? Funktionieren CSS-Befehle in allen Browsern? Unser Ratgeber hilft mit einem Überblick von häufig verwendeten CSS-Befehlen und mit…
Docker-Befehle
Die Docker-Befehlen dienen zum Steuern der Docker-Engine auf dem lokalen Host. Auf der Kommandozeile eingegeben, werden Sie in API-Calls an den Docker-Daemon übersetzt. Mit Docker-Befehlen lassen sich Images, Container und Volumen verwalten. Arbeitet man viel mit der Software ist es hilfreich, sich gut mit den Docker-Befehlen auszukennen.
Telnet-Befehle in der Übersicht
Mithilfe von Telnet-Befehlen steuern Sie die Verbindung zwischen Ihrem PC oder Laptop und einem externen System, z. B. einem Webserver. Dabei ist es nicht nur wichtig, die entsprechenden Kommandos zu kennen, sondern auch die passenden Optionen. Denn erst durch die Angabe von Parametern entfalten die Telnet-Befehle ihre Wirkung.
a href: So bauen Sie Links auf Ihrer Website ein
Interne und externe Links sind für beinahe jede Onlinepräsenz von großer Bedeutung. Mit a href bauen Sie Links auch auf Ihrer Website ganz bequem ein. In diesem Tutorial zeigen wir Ihnen, wie href-Attribute aufgebaut sind und welche Werte sie haben dürfen. Außerdem lernen Sie praktische Anwendungsbeispiele für href in HTML kennen.
