Das HTML5-Template: DOCTYPE, head und body

Das Gerüst oder Template einer HTML-Seite ist schlicht: Es besteht aus dem Seitenkopf (head) und dem Seitenkörper (body) – schön eingepackt in ein html-Tag.

Im head stehen Anweisungen für Browser und Suchmaschinen, die Adressen oder URLs von zusätzlichen Dateien wie Stylesheets und Javascript. Über allem thront der DOCTYPE.

Während HTML5 neue Tags für die Strukturierung bringt, einige Tags aus HTML4 und XHTML als veraltert gebannt hat, hat im head-Bereich von HTML-Seiten wenig geändert. Das HTML-Dokument beginnt weiterhin mit dem doctype-Tag.

Die Angabe des Dokumententyps verhilft dem Browser zu einer besseren Orientierung und vermeidet Darstellungsfehler.

!DOCTYPE ist kein HTML-Tag, sondern gibt die Art des Dokuments an: html, svg, mathml … neben HTML gibt es jede Menge anderer Dokumententypen.

<!DOCTYPE html>
<html>
   <head> …
   </head>

   <body> …
   </body>
</html>

Das HTML-Template

Im head-Tag der HTML-Seite stehen Anweisungen für den Browser und Metadaten zum Dokument. An der grundsätzlichen Stuktur hat HTML5 nichts geändert, sondern nur einige Anweisungen gestrafft und überflüssige Attribute herausgenommen.

<title … />
Das title-Tag bildet die Über-Überschrift der Webseite. Browser setzen i.A. das title-Tag in den oberen Fensterrand. Suchmaschinen nutzen das title-Tag als Überschrift in der Trefferliste, Bookmarks oder Favoriten bezeichnen mit dem title-Tag den Eintrag.
<meta … />
meta-Tags transportieren verschiedene Meta-Informationen, die sich mit den anderen Tags für den Seitenkopf nicht wiedergeben lassen – z.B. die Zusammenfassung des Inhalts und den Zeichensatz der Webseite.
<link … />
link-Tags binden externe Dateien in die Webseite, z.B. die CSS-Datei.
<script … >
scripte werden nicht mit dem link-Tag, sondern mit dem HTML-script-Tag eingebunden.

Auf jeden Fall aber wird nichts von dem, was innerhalb des öffnenden und schließenden head-Tags steht, auf der Webseite angezeigt.

<!DOCTYPE html>
<html lang="de">
<head>
   <title>Mein HTML-Dokument</title>
   <meta charset="utf-8" />
   <meta name="description" content="Zusammenfassung des Inhalts" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <base href="http://www.meineSeite.de/" />
   <link href="style.css" rel="stylesheet" media="screen" />
   <script src="script.js"></script>
   <style type="text/css" >
   </style>
</head>
<body>

</body>
</html>

Gegenüber dem komplexen Doctype für XHTML-Dokumente ist das Doctype-Tag schlicht und einfach geworden. Eine Versionsnummer – html5 – gibt es nicht. Im Grunde genommen reicht es den Browsern, wenn überhaupt ein Doctype vermerkt ist: Dann verhalten sie sich Standard-gerecht und simmulieren nicht in ihre alten Fehler.

Für das script-Tag gilt type="text/javascript" als Vorgabe und muss also im script-Tag nicht mehr notiert werden. Um alte Browser muss man sich keine Gedanken machen, denn alle Browser haben stets Javascript als Vorgabe für die Scriptsprache angesehen.

Aus denselben Gründen kann type="text/css" aus dem link-Tag für die CSS-Datei entfallen.

Die drei Übertags sind im Grunde genommen nicht erforderlich. html, head und body könnten in HTML5 auch weggelassen werden. Die modernen Browser hätten damit kein Problem und würden die drei Tags automatisch in den DOM-Baum des Dokuments setzen.

Die Angabe des Zeichensatzes

<meta charset="utf-8" />

Damit Dokumente nicht mehr wie früher mit »HTML-Entities« (z.b. für Umlaute wie &auml; anstelle von ä) geschrieben werden müssen, gibt diese Zeile den verwendeten Zeichensatz an. Im Grunde genommen könnte die Zeile entfallen und der Browser einfach stets den Zeichensatz utf-8 voraussetzen.