Artikelreihe HTML 5: Den neuen HTML 5 Doctype einsetzen
Bevor wir die neuen Tags von HTML 5 verwenden können, müssen wir zunächst den Browsern und Validierern mitteilen, dass wir auf unserer Website HTML 5 verwenden. Dies geschieht über die Angabe des Doctypes. Doch erkennen auch ältere Browser den Doctype? Was ändert sich dadurch in der Verwendung des Markups? Diese Details versuche ich in meinem ersten praktischen Teil zu klären!
Was ist überhaupt ein Doctype?
Der Doctype teilt dem Browser oder auch Validator mit, welcher Code auf der Website verwendet wird. Je nach Angabe verwendet ein Browser dadurch den Normalen Modus oder den Quirks-Mode um den Code zu Interpretieren. Um die Seite also korrekt interpretieren zu lassen ist es unabdingbar den Doctype zu definieren.
Welche Doctypes gibt es und sind Sinnvoll?
Vor HTML 5 wurden meist der Doctype HTML 4.01 Transitional oder XHTML Transitional bzw. Strict verwendet. Sie teilten dem Browser mit, dass eben wahlweise HTML oder XHTML verwendet wurde. Damit man Websites konform zu den Webstandards des W3C erstellen konnte war es wichtig einen der im W3C empfohlenen Doctypes zu verwenden. Diesen Doctype zum Beispiel habe ich zuvor bevorzugt verwendet:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Durch die Definition des Doctypes als Strict, war es somit notwendig, sich an die XML konforme Syntax zu halten. Die sah zum Beispiel vor, dass alle geöffneten Tags geschlossen werden müssen. Beispiel:
<img src=”bild.jpg” />
Hielt man sich nicht daran, war der Code Fehlerhaft und es konnte zu Problemen in der Darstellung bzw. bei der Validierung kommen. Weitere verbotene Elemente und Attribute der Strict Variante lassen sich bei selfhtml.org finden.
Der HTML 5 Doctype!
Der neue HTML5 Doctype ist im Vergleich zu den älteren Doctypes wesentlich simpler:
<!DOCTYPE html>
Mehr muss nicht angegeben werden. Nun erkennen Browser und Validator, dass es sich bei dem Dokument um ein HTML5 Dokument handelt, sofern sie dieses bereits unterstützen.
Welche Syntax muss ich mit HTML 5 verwenden?
Im Vergleich zu den oben aufgeführten Doctypes, ist es bei dem HTML 5 Doctype möglich HTML und XHTML Syntax zu vermischen. Jedoch kann dies trotzdem zu Problemen führen. Ein gutes Beispiel dafür führte mein HTML 5 Buch auf:
Einige Browser neigen dazu selbstschließende Tags zu entfernen, da diese vor HTML 5 nicht als valides HTML angesehen wurden. Sollte man also etwas wie dieses Beispiel in seiner Website integriert haben:
<script language=”javascript” src=”meine.js” />
<h1>Meine Seite</h1>
Dann würde der Browser den schließenden / löschen. Der Browser würde nun die h1-Überschrift innerhalb des Script-Tags rendern, da es ja nie geschlossen werden würde. Das Script sollte deshalb explizit mit einem schließendem Tag: </script> beendet werden, obwohl die oben genannte variante valide wäre. Weitere Eigenschaften und Probleme der XHTML Syntax lassen sich auf: http://www.webdevout.net/articles/beware-of-xhtml#myths finden.
Diese Probleme sind jedoch eher genereller Natur. Wer ein bisher valides und funktionierendes HTML verwendet hat, der sollte bei Umstellung auf den neuen Doctype keine Probleme bekommen.
Welche Browser verstehen den HTML 5 Doctype?
| Browserkompatibilität: | ||||
5.0 |
4.0 |
3.6 |
10 |
6.0 |
Alle aktuellen Browser unterstützen den HTML5 Doctype bereits. Sogar der Internet Explorer 6 rendert das Dokument im normalen Modus. Einer Umstellung sollte also nichts im Wege stehen!
Wie wende ich den HTML 5 Doctype an?
Der Doctype muss immer an erster Stelle des Dokuments stehen. also noch vor dem <html>…</html> Tag. Die Integration ist also denkbar simpel.
Jedoch sollte man dem Browser, sofern nicht schon geschehen, mitteilen, dass es sich um ein html-Dokument mit UTF-8 Zeichensatz handelt. Dies geschieht per Meta-Tag innerhalb des <head>…</head> Tags.
Hier ein Beispiel, einer Website mit gültiger HTML 5 Doctype und Standard-Zeichensatz:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Meine Website</title> </head> <body> <!-- My Content --> </body> </html> |
Sogar google.de und apple.com verwendet bereits heute den HTML5 Doctype. Man kann also ruhigen Gewissens seine Seite aktualisieren. Am besten jagt Ihr eure Website anschließend nochmals durch den W3C-Validator.