Dez 2011

Das HTML-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. Aber über allem thront der DOCTYPE.

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:

<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 – 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 PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Mein HTML-Dokument</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta name="description" content="Zusammenfassung des Inhalts" />
   <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
   <script src="script.js" type="text/javascript"></script>

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

Wie strikt soll das Dokument sein?

Tatsächlich wäre der Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

»gut genug«. 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.

Aber während der Entwicklung einer Webseite und der Programmierung von Anwendungen hilft ein striker Dokumententyp bei der Fehlersuche. Dann nämlich kann der Entwickler auf Validatoren für das HTML-Markup und Stylesheets zurückgreifen, denn es sind häufig Fehler in diesen Teilen einer Seite, die wiederum zu schwer auffindbaren Javascript-Fehlern führen.

Die Angabe des Zeichensatzes

<meta http-equiv="content-type" content="text/html; 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.

Das XML-Tag in XHTML-Dokumenten

Tatsächlich kann dann immer noch ein Tag vor dem Doctype stehen: die XML-Deklaration. Wenn die XML-Deklaration an den Anfang des Dokuments gesetzt wird, kann die Angabe des Zeichensatzes mit einem meta-Tag entfallen, denn der Zeichensatz wird dann bereits im XML-Prolog festgelegt.

<?xml version="1.0" encoding="utf-8"?>
Die XML-Deklaration informiert den Browser, dass die folgenden Daten XML-gerecht notiert sind und gibt den verwendeten Zeichensatz an. Diese Deklaration gibt es in HTML nicht. In XHTML ist der XML-Prolog optional.

Internet Explorer 6 fällt zurück in den Quirks-Modus, wenn der XML-Prolog am Anfang des Dokuments steht – ein Grund für viele Webdesigner, auf den XML-Prolog zu verzichten.