HTML5-Template: doctype, head und body

HTML Template: doctype, head, meta, bodyhtml Template

Das HTML-Template besteht aus dem Seitenkopf (head) und dem Seitenkörper (body) – eingepackt in ein html-Tag. In 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.

Das HTML-Dokument beginnt mit !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 lang="de">
   <head> …
   </head>

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

Das HTML-Template

Im head-Tag der HTML-Seite stehen Anweisungen für den Browser und Metadaten (zusätzliche, nicht sichtare Informationen) zum Dokument.

<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 … >
Scripts werden nicht mit dem link-Tag, sondern mit dem HTML-script-Tag eingebunden.

Nichts von dem, was innerhalb des öffnenden und schließenden head-Tags steht, wird auf der Webseite angezeigt.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <!--[if lt IE 9]>
   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![end if]-->
   <title>Mein HTML-Dokument</title>
   <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" />
   <style type="text/css">
   …
   </style>
</head>
<body>

</body>
</html>

Gegenüber dem komplexen Doctype für XHTML-Dokumente ist die Angabe des Doctype mit HTML5 schlicht. Eine Versionsnummer – html5 – gibt es nicht. Statt langer kryptischer URLs (um die sich kein Browser jemals gekümmert hat) sagt der HTML5 Doctype jetzt nur noch, dass hier ein HTML-Dokument vorliegt. Im Grunde genommen reicht es den Browsern, wenn überhaupt ein Doctype vermerkt ist: Dann verhalten sie sich Standard-gerecht (auch IE8) 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.

HTML5 Shim / Shiv code

Das Script in diesem HTML-Template ist das HTML5 Shim oder »Shiv code« auf Google Code. HTML5 Shim ist ein kleines Javascript für Legacy Browser (älter als IE9), die HTML5-Tags nicht unterstützen. Das Script bringt IE8 und älter HTML5-Tags bei.

Der Shiv code ist zwar nur ein paar Bytes groß, aber jedes Script blockiert das Laden weiterer Elemente. Um den modernen Browsern dieses Script zu ersparen, sitzt es in einem Conditional Comment (<!--[if lt IE 9]>) und wird nur von Browsern, die älter sind als IE9, interpretiert.

Alle anderen Browser sehen nur einen HTML-Kommentar und überlesen alles innerhalb des Conditional Comment.

UTF-8 Zeichensatz

<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 meta charset="utf-8" den Zeichensatz der HTML-Seite an. Im Grunde genommen könnte die Zeile entfallen und der Browser würde den Zeichensatz utf-8 automatich einsetzen.

Umsteigen von XHTML auf HTML5

HTML5 hat sich all der komplizierten Riten und Runen aus XHTML entledigt. HTML5 kümmert sich nicht um die Darstellung von HTML-Elementen, sondern um die Strukturierung des Inhalts der HTML-Seite – das der größte Unterschied zwischen HTML5 und XHTML.

HTML5: Pragmatische Syntax

Die HTML5-Syntax ist laxer mit wenig Schreibregeln als der Vorläufer XHTML. Das Doctype-Tag ist einfach, HTML5-Tags dürfen klein oder groß geschrieben werden, nicht alle Tags müssen geschlossen werden.

Und noch einen Schritt weiter:

  • Im Gegensatz zu XHTML dürfen HTML5-Tags groß oder klein geschrieben werden,
  • In XHTML mussten alle HTML-Tags geschlossen werden – selbst leere Tags wie br und img. In HTML5 müssen nicht mehr alle Tags geschlossen werden – z.B. li-Tags, Definitionslisten (dt- und dd-Tags), td-Tags und p-Tags.
  • Attribute müssen nicht in Hochkommas gesetzt werden.

Deprecated – veraltert – in HTML5

Allerdings bleiben HTML-Objekte, die in XHTML als veraltert und unerwünscht galten, weiterhin außen vor, auch wenn HTML5 selbst so veralterte HTML-Tags wie font nicht ausdrücklich verbietet.

  • Die Browser müssen veralterte Tags wie font und Attribute, die als deprecated markiert sind, weiterhin unterstützen. So ist sichergestellt, das HTML4-Seiten weiterhin im Sinne der Autoren richtig dargestellt werden.
  • Autoren von Webseiten hingegen sollen sauberes HTML schreiben und veralterte Tags auch weiterhin nicht benutzen
    (basefont, big, center, font, ss, strike, u, frame, frameset, noframes, acronym, applet, isindex, dir)

In HTML5 verschwinden weitere Attribute – aber von deren Abgang werden wir nicht merken, da diese HTML-Attribute kaum benutzt wurden.

a, linkrev, charset
imglongdesc, name
htmlversion
thabbr
tdscope

Aufgeräumte HTML5-Attribute

Eine Reihe von HTML5-Attributen sind vom Typ Boolean. Dann reicht es schon, das Attribut ohne Wertzuweisung in das HTML5-Tag zu setzen:

<div id="footer" hidden>

Das Type-Attribut muss nicht mehr übergeben werden. Mime-Types sind nicht mehr erforderlich, da die Browser aufgefordert sind, den Mime-Type zu nutzen, den der Server angibt.

<link rel="stylesheet" type="text/css" media="all" />

Dasselbe gilt für das Einbinden von Javascript in HTML5-Webseiten.

<script src="../xxscripts.js" type="text/javascript">
</script>

Alles, was das Dokument straffer, kürzer und besser lesbar macht, ist willkommen.

Trotzdem kann es nicht schaden, die Strenge, die XHTML dem Webdesigner auferlegt hat, in anderen Punkten beizubehalten. Tags groß oder klein schreiben: Hauptsache konsistent. Attribute sollten weiter in Hochkommas gesetzt werden. In einigen Fällen können mehrere Werte in einem Attribut aufgeführt werden – dann sind die Hochkommas gefordert.

Mehr rund um HTML-Templates