CSS, HTML und Javascript mit {stil}

HTML5-Template: doctype, head und body

HTML Template: doctype, head, meta, body

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>

HTML head

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">
   <title>Mein HTML-Dokument</title>
   <meta name="description" content="Zusammenfassung des Inhalts">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="style.css" rel="stylesheet" media="screen">
   <style type="text/css">
   …
   </style>
   <!--[if lt IE 9]>
   <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![end if]-->
</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.

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 (aber Kleinschreibung ist der deFakto-Standard),
  • mit XHTML mussten alle HTML-Tags geschlossen werden – selbst leere Tags wie br und img. In HTML5 müssen nicht mehr alle Tags geschlossen werden – li-Tags, Definitionslisten (dt- und dd-Tags), td-Tags und p-Tags brauchen kein schließendes Tag,
  • Attribute (ohne Leerzeichen) 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 nichts 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="scripts.js" type="text/javascript">
</script>

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

Trotzdem kann es nicht schaden, etwas von der 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.