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.
- Flexibel: Hosting, das jedem Website-Traffic standhält
- Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
- Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups
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.