Die Doctype-Deklaration für HTML-Dokumente im HTML5
Die Entwicklung der Browser und die verschiedenen Modi
Beginnen wir mit der ersten Zeile:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Dieses Ding nennt man die Doctype-Deklaration. Dahinter verbirgt sich eine lange Geschichte und etwas schwarze Magie. Während der Entwicklung des Internet Explorer 5 für den Mac stand Microsoft vor einem überraschenden Problem. Die anstehende Version des Browsers hatte ihre Standardunterstützung so stark verbessert, dass ältere Seiten nicht mehr ordentlich dargestellt wurden. Besser gesagt, sie wurden korrekt (d.h. der Spezifikation gemäß) dargestellt, aber man erwartete, dass sie inkorrekt dargestellt würden. Die Seiten selbst wurden unter Berücksichtigung der Macken der vorherrschenden Browser der Zeit, allen voran Netscape 4 und Internet Explorer 4, geschrieben. IE5/Mac war so fortgeschritten, dass er das Web zerstörte.
Microsoft fand eine innovative Lösung.
Bevor der IE5/Mac die Seite darstellte, warf er einen Blick auf die Doctype-Deklaration, die üblicherweise die erste Zeile in einer HTML-Quelle bildet (und sogar vor dem <html>-Element selbst steht). Ältere Seiten (die sich auf die Mängel älterer Browser stützten) enthielten üblicherweise überhaupt keine Doctype-Deklaration. Diese Seiten stellte der IE5/Mac wie ältere Browser dar. Um die neue Standardunterstützung zu "aktivieren", mussten die Autoren von Webseiten vor dem <html>-Element den richtigen Doctype deklarieren.
Dieses Konzept verbreitete sich wie ein Lauffeuer, und schon bald boten alle wichtigeren Browser zwei Modi an: den "Quirks-Modus" (der auf den Macken basierte) und den "Standards-Modus". Wie Sie sich denken können – schließlich reden wir hier ja über das Internet –, geriet die Sache schnell außer Kontrolle. Als Mozilla versuchte, Version 1.1 des eigenen Browsers zu veröffentlichen, stellte man fest, dass sich einige im Standards-Modus dargestellte Seiten eigentlich auf bestimmte Macken verließen. Um diese Macken zu beheben, reparierte Mozilla seine Rendering-Engine und zerstörte damit auf einen Schlag Tausende von Seiten. Und dies führte – ungelogen – zum "Almost Standards-Modus".
In seiner grundlegenden Schrift, " Activating Browser Modes with Doctype", fasst Henri Sivonen die verschiedenen Modi zusammen:
Quirks-Modus
Im Quirks-Modus verletzen Browser die zeitgenössischen Webformat-Spezifikationen, um zu vermeiden, dass Seiten "beschädigt" werden, die gemäß den Verfahren geschrieben waren, die Ende der 1990er-Jahre vorherrschend waren.
Standards-Modus
Im Standards-Modus versuchen Browser, den Spezifikationen entsprechende Dokumente spezifikationsgemäß zu behandeln, sofern der Browser diese unterstützt. HTML5 nennt diesen Modus den "No Quirks-Modus".
Almost Standards-Modus
Firefox, Safari, Chrome, Opera (seit 7.5) und IE8 bieten einen Almost Standards-Modus genannten Modus, der die vertikale Größenermittlung für Tabellenzellen traditionell und nicht streng gemäß der CSS2-Spezifikation durchführte. Diesen Modus bezeichnet HTML5 als den "eingeschränkten Quirks-Modus".
Sie sollten den Rest von Henris Artikel lesen, weil ich hier erheblich vereinfache.
Selbst im IE5/Mac gab es einige ältere Doctype-Deklarationen, die nicht reichten, um die Standardunterstützung zu aktivieren. Mit der Zeit wuchs die Liste der Macken und ebenso die Liste der Doctypes, die den Quirks-Modus aktivierten. Bei meiner letzten Zählung gab es 5 Doctypes, die den Almost Standards-Modus aktivierten, und 73, die den Quirks-Modus aktivierten. Aber dabei habe ich sicherlich einige vergessen – von dem, was der Internet Explorer 8 macht, um zwischen seinen vier – Sie haben richtig gehört, vier – Rendering-Modi umzuschalten, ganz zu schweigen. Unter https://hsivonen.fi/doctype/ie8-mode.png finden Sie ein Flussdiagramm. Vernichten Sie es. Überantworten Sie es dem Feuer.
Also ... Wo waren wir noch? Stimmt, beim Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Das ist einer der 15 Doctypes, die in allen modernen Browsern den Standards-Modus aktivieren. Er ist vollkommen in Ordnung. Wenn Sie möchten, können Sie ihn lassen, wie er ist. Oder ändern Sie ihn in den HTML5-Doctype, der kürzer und süßer ist und ebenfalls in allen modernen Browsern den Standards-Modus aktiviert.
Das ist der HTML5-Doctype:
<!DOCTYPE html>
Das ist alles. Nur 15 Zeichen. Das ist so einfach, dass man es mit der Hand tippen kann, ohne es zu verbocken.
Die Doctype-Deklaration muss die erste Zeile Ihrer HTML-Datei sein. Steht irgendetwas davor – selbst eine einzige leere Zeile –, behandeln manche Browser sie so, als enthielte sie überhaupt keine Doctype-Deklaration. Gibt es sie nicht, stellt der Browser Ihre Seite im Quirks-Modus dar. Dieser Fehler kann sehr schwer zu entdecken sein. Zusätzlicher Withespace spielt in HTML üblicherweise keine Rolle. Man neigt also dazu, ihn einfach zu übersehen. Aber an dieser Stelle ist er äußerst wichtig!
Das Wurzelelement einer HTML5-Webseite
Eine HTML-Seite ist eine Folge geschachtelter Elemente. Die vollständige Struktur der Seite ist wie ein Baum. Einige Elemente sind "Geschwister", wie Zweige, die aus dem gleichen Baumstamm wachsen. Einige Elemente sind "Kinder" anderer Elemente, vergleichbar mit einem dünneren Zweig, der aus einem dickeren Zweig wächst. (Umgekehrt funktioniert das auch: Ein Element, das andere Elemente enthält, wird als "Elternknoten" seines unmittelbaren Kindelements und als "Vorfahr" seiner Enkel bezeichnet.) Elemente, die keine Kinder haben, bezeichnet man als "Blattknoten". Das äußerste Element, das Vorfahr aller anderen Elemente auf der Seite ist, bezeichnet man als das "Wurzelelement" oder den "Wurzelknoten". Das Wurzelelement einer HTML-Seite ist immer <html>.
In unserer Beispielseite sieht das Wurzelelement so aus:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Dieses Markup ist vollständig in Ordnung. Wieder können Sie es lassen, wie es ist – wenn es Ihnen gefällt. Es ist gültiges HTML5. Aber Teile davon sind in HTML5 nicht mehr erforderlich.
Das Erste, was wir besprechen müssen, ist das xmlns-Attribut. Es ist ein Überbleibsel aus XHTML 1.0. Es sagt, dass sich die Elemente in dieser Seite im XHTML-Namensraum befinden,. Aber Elemente in HTML5 sind immer in diesem Namensraum. Sie müssen ihn also nicht mehr explizit deklarieren. Ihre HTML5-Seite funktioniert in allen modernen Browsern, ob dieses Attribut vorhanden ist oder nicht.
Lassen wir das xmlns-Attribut weg, bleibt uns folgendes Wurzelelement: <html lang="en" xml:lang="en">
Die Attribute lang und xml:lang definieren beide die Sprache dieser HTML-Seite. en steht für "Englisch". Warum aber zwei Attribute für die gleiche Sache? Auch das ist ein XHTML-Erbe. In HTML5 hat nur das lang-Attribut Auswirkungen. Sie können das xml:lang-Attribut stehen lassen, wenn Sie wollen. Doch wenn Sie das tun, müssen Sie sicherstellen, dass es den gleichen Wert enthält wie das lang-Attribut:
Zur Erleichterung des Umstiegs von und nach XHTML können Autoren ein Attribut in keinem Namensraum, ohne Präfix und mit dem literalen lokalen Namen xml:lang auf HTML-Elementen in HTML-Dokumenten definieren. Ein solches Attribut darf allerdings nur definiert sein, wenn ebenfalls ein lang-Attribut ohne Namensraum angegeben wird. Beide Argumente müssen den gleichen Wert enthalten, wenn sie ohne Berücksichtigung von Groß-/Kleinschreibung im ASCII-Bereich verglichen werden. Das namensraum- und präfixlose Attribut mit dem literalen lokalen Namen xml:lang hat keine Auswirkungen auf die Sprachverarbeitung.
Sind Sie bereit, es fallen zu lassen? Das ist in Ordnung, lassen Sie es langsam aus Ihrem Leben verschwinden ... und weg! Wir verbleiben bei diesem Wurzelelement:
<html lang="en">
Und das ist alles, was ich dazu zu sagen habe.