Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
Markus Seyfferth 10. November 2009

HTML5 – ein Überblick

HTML5 ist derzeit in aller Munde.  Ende Mai ließ Google auf der Entwicklerkonferenz »Google I/O 2009« in San Francisco aufhorchen, als groß Werbung für den zukünftigen Webstandard betrieben wurde, welcher die Basis für kommende Google-Anwendungen stellen soll.  Einen weiteren Schub erhielt die neue HTML-Version, als das Standardisierungskonsortium W3C (englisch) Anfang Juli die Einstellung der Arbeiten am parallel entwickelten XHTML2-Standard ankündigte, um sich voll und ganz auf HTML5 konzentrieren zu können.

HTML5 soll das in die Jahre gekommene HTML4 beziehungsweise XHTML 1 ablösen und besser an die neuen Anforderungen des vielzitierten Web 2.0 angepasst sein. Aufwändige Workarounds sollen damit der Vergangenheit angehören.  Die Entwicklung wird von der WHATWG (englisch) (Web Hypertext Application Technology Working Group) vorangetrieben, einer Arbeitsgruppe, die aus dem W3C heraus entstanden ist.  Mit Ausnahme Microsofts sind alle namhaften Browserhersteller in der WHATWG involviert.

Wer sich bereits der neuen Technologie annehmen will, muss nicht notwendigerweise alles Alte über Bord werfen.  HTML5 versucht großteils, abwärtskompatibel zu sein.  Wer aktuell mit den Strict-Varianten von HTML4 oder XHTML 1 arbeitet, muss grundsätzlich nur die Doctype-Deklaration auf <!DOCTYPE html> ändern und einige wenige Elemente entrümpeln, die nur der visuellen Darstellung dienen, oder für die es bessere Alternativen gibt.  Natürlich kann man erst mit den neuen Elementen und Attributen die Stärken von HTML5 richtig nutzen.

Struktur ist Alles

HTML5 kennt einige neue Elemente zur besseren semantischen Strukturierung von Dokumenten.  Diese sind vor allem dazu da, um mit den inzwischen verbreiteten <div id="…">-Blöcken aufzuräumen und den Aufbau einer Seite standardisiert auszuzeichnen.  Die Schlüsselrollen nehmen hierbei die neuen Elemente header, nav, article, aside und footer ein, welche – grob umrissen – folgende Aufgaben erfüllen:

  • header umfasst den Kopfbereich eines Dokuments und kann typischerweise den Titel des Dokuments, Logos, ein Formular zur Schnellsuche oder ein Inhaltsverzeichnis enthalten.
  • nav ist – nomen est omen – für Hauptnavigationsblöcke gedacht.
  • article ist der Ort für die eigentlichen Inhalte der Seite.  Die Verwendung soll so erfolgen, dass article-Blöcke, für sich genommen, alleinstehend sind, also beispielsweise auch unverändert als Inhalt eines Newsfeeds verwendet werden könnten.  article-Blöcke können mit section in mehrere Abschnitte unterteilt werden und sind außerdem schachtelbar.
  • aside beheimatet Abschnitte, die nicht unmittelbar mit dem eigentlichen Inhalt zusammenhängen – ein klassischer Fall für Sidebars, aber auch für inhaltliche Einschübe in einem article.
  • footer beinhaltet das, was man üblicherweise im Fußbereich eines Dokuments findet: Autor- und Copyright-Informationen oder Querverweise.  footer kann, aber muss nicht notwendigerweise am Ende eines Dokuments stehen.

Das aktuelle Grundgerüst der Seiten des Dr. Web Magazins liefert ein prädestiniertes Beispiel für gängige HTML-Strukturen, und ließe sich einfach mit den neuen HTML5-Strukturelementen formulieren.

Reformulierung des HTML-Grundgerüsts des Dr. Web Magazins in HTML5

Reformulierung des HTML-Grundgerüsts des Dr. Web Magazins in HTML5

Mehr Wert durch mehr Bedeutung

Ausgesprochen nützlich sind jene Elemente, die nicht nur ein Mehr an Struktur bringen, sondern auch die Semantik auf Textebene bereichern.

Mit dem time-Element kann man Datums- und/oder Zeitangaben im Text gesondert auszeichnen.  Angaben à la »übermorgen« kann man mit Hilfe des datetime-Attributs präzisieren.  Das genaue Datum (beziehungsweise Uhrzeit) muss dabei im ISO-Format angegeben werden:

Der diesjährige »CSS Naked Day« <time datetime="2009-04-09">anfang April</time> fand wieder mehr als 1000 Unterstützer aus aller Welt.

Durch die maschinenlesbaren Metaangaben ist beispielsweise eine Funktion zum Exportieren in ein Kalenderprogramm denkbar.  Das time-Element eignet sich leider nicht für historische Angaben (die oft ungenau sind, etwa »19. Jahrhundert«) oder Daten, die nicht den gregorianischen Kalender verwenden.  Dieser Umstand wird allerdings noch diskutiert, und es scheint, als sei hier das letzte Wort noch nicht gesprochen.

Ein weiteres nützliches Element ist mark.  Mit mark können Textpassagen hervorgehoben werden, wie man es mit einem Leuchtstift auf Papier machen würde.  Ein klassischer Verwendungszweck ist das Hervorheben von Schlüsselbegriffen auf einer Seite, die als Ergebnis einer Suche geliefert wurde.

<p>In der Bucht von San Francisco befindet sich unter anderem die ehemalige Gefängnisinsel <mark>Alcatraz</mark>, wo eine Flucht nahezu unmöglich war.</p>

Anzeigebeispiel für mit dem neuen mark-Element hervorgehobenen Text

Anzeigebeispiel für mit dem neuen mark-Element hervorgehobenen Text (Opera 10.01/Linux)

Entwickler von Web-Applikationen werden das neue Element progress begrüßen.  Es erlaubt, den Fortschritt einer Aufgabe anzuzeigen – beispielsweise als Prozent- oder Sekundenangabe – und via JavaScript laufend zu aktualisieren. Mit dem Attribut value (beziehungsweise mit dem Elementinhalt) läßt sich der aktuelle Wert setzen.  Das max-Attribut spezifiziert den Wert, der bei Vervollständigung des Tasks erreicht wird.  Ein enger Verwandter von progress ist meter, welches einen statischen Überblick über einen aktuellen Ist-Zustand gibt, etwa den aktuellen Platzverbrauch des eigenen Webmail-Kontos:

Fortschritt: <progress max="100" value="67">67%</progress>
<meter min="0" max="100" value="75">75 von 100 MiB verbraucht</meter>

Multimedia total

Eine weitere Neuerung stellt das Element figure dar.  Damit können Abbildungen mit einer Beschriftung versehen werden (legend), wie man es aus dem Printbereich kennt.  Bislang mußte man sich dazu mit Mikroformaten (englisch) behelfen.  Man ist dabei freilich nicht auf Fotos oder Grafiken beschränkt, sondern kann dies beispielsweise auch für Videos oder Programmier-Codeausschnitte verwenden, zum Beispiel:

<figure>
<img src="golden-gate-bridge.jpg" alt="" />
<legend>Abbildung 1.  Die Golden Gate Bridge. (© Christian Mehlführer)</legend>
</figure>
<figure>
<pre><code>print "Hello, world!"</code></pre>
<legend>Abbildung 2.  Das »Hello, world!«-Programm in Python.</legend>
</figure>

Anzeigebeispiel für ein mit dem figure-Element eingebettetes Bild (Opera 10.01/Linux)

Anzeigebeispiel für ein mit dem figure-Element eingebettetes Bild (Opera 10.01/Linux)

Vor allem Bilder- und Videogalerien werden von diesem neuen Element profitieren und zukünftig einheitlich ausgezeichnet werden können, womit man auch schon bei der nächsten Neuerung angelangt ist: den Elementen video und audio.

Zunehmende Bandbreiten haben in den letzten Jahren die sprunghafte Verbreitung von Videodaten im WWW möglich gemacht, Stichwort: YouTube.  Mittlerweile findet man Filmchen und Audioschnipsel an allen Ecken.  Dieser Trend war bei der Erstellung der alten HTML-Spezifikation vor zirka zehn Jahren, als die heutigen Möglichkeiten des Internet noch nicht einmal in den Kinderschuhen steckten, nicht absehbar.  Entsprechend umständlich ist bisweilen immer noch die browser- und plattformübergreifende Einbindung von Multimediadateien.

video und audio sollen dem ein Ende setzen und bieten eine einfache Lösung an:

<video src="montana-to-rice.ogv" type="video/ogg; codecs='theora, vorbis'" controls="controls"></video>
<audio src="the-play-radio-call.oga" type="audio/ogg; codecs='vorbis'"></audio>

Anzeigebeispiel für ein mit dem video-Element eingebettetes Video (Firefox 3.5.4/Linux)

Anzeigebeispiel für ein mit dem video-Element eingebettetes Video (Firefox 3.5.4/Linux)

Wenn – wie im Beispiel – das controls-Attribut gesetzt ist, können die Browser dann selbst alle nötigen Kontroll-Elemente zur Steuerung anzeigen, etwa Fortschrittsbalken, Start/Pause-Schaltfläche oder Lautstärkenregelung.  Die Crux an der Geschichte, es wird in der Spezifikation wohl kein gemeinsames Audio- und Videoformat festgelegt werden, welches jeder Browser unterstützen sollte.  Daher ist es ratsam, mit dem type-Attribut den MIME-Type der eingebundenen Mediendatei zu spezifizieren. Ursprünglich waren die freien Codecs der Ogg-Familie (englisch) als gemeinsame Basis angedacht, doch das widerspricht beispielsweise Apples Interessen, welches sein hauseigenes Quicktime-Format vorantreiben will.  Somit müssen Videoersteller weiterhin hoffen, daß eine möglichst große Zahl an Clients ihr gewähltes Videoformat unterstützt.  Ob damit eine Abkehr von den gängigen suboptimalen Flash-Lösungen gelingt, bleibt abzuwarten.

Web-Applikationen

Die größte Aufmerksamkeit erregt aktuell das canvas-Element.  Es stellt grundsätzlich eine 2D-Bitmap-Zeichenfläche frei definierbarer Größe zur Verfügung.  Mittels JavaScript kann man darin zeichnen und Grafiken on-the-fly erstellen.  Somit lassen sich zum Beispiel Diagramme einfach dynamisch generieren, oder man kann auch Mini-Spiele damit produzieren.

<canvas width="150" height="100" id="canvas" />

wird mit entsprechendem JavaScript

var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(160, 63, 63, 0.5)';
ctx.fillRect(20, 20, 80, 60);
ctx.fillStyle = 'rgba(63, 63, 160, 0.5)';
ctx.fillRect(70, 30, 40, 60);
}

zu

Anzeigebeispiel für eine canvas-Zeichnung (Firefox 3.5.4/Linux)

Anzeigebeispiel für eine canvas-Zeichnung (Firefox 3.5.4/Linux)

An und für sich wären solche Anwendungen auch mit dem bereits etablierten XML-Vektorformat SVG (englisch) realisierbar, doch der Durchbruch im Web wurde bei SVG nie erreicht.  Auch wenn sich der Browserhersteller aus Redmond mit der Unterstützung von canvas noch ziert, besteht hier mehr Hoffnung.  Das neue Element ist zum einen ein Teil der kommenden Spezifikation und keine eigenständige Technologie und zum anderen bringt es eine flachere Lernkurve mit sich, da es über das Entwicklern bereits vertraute JavaScript zu bedienen ist.

Web Forms 2.0

Wo Web-Applikationen sind, sind Formulare nicht weit.  HTML4 stellt nur allgemeine Formularelemente zur Verfügung, wie zum Beispiel Texteingabe- und Passwortfelder, Checkboxen oder Dropdown-Listen.  Wenn man in einem Textfeld etwa eine Datumseingabe erwartet, so ist man in der Regel gezwungen, serverseitig zu verifizieren, ob es sich bei der Benutzereingabe überhaupt um ein gültiges Datum handelt.  Ähnlich verhält es sich bei URLs, numerischen Werten oder anderen Eingaben.

HTML5 erweitert die Möglichkeiten des input-Elements beträchtlich, indem es dem type-Attribut einige neue Werte beschert.  So kann man beispielsweise mit type="email" angeben, dass man eine E-Mail-Adresse erwartet.  Die Überprüfung, ob es sich bei einer Eingabe um eine gültige Adresse handeln kann, findet dann bereits direkt im Browser statt – ohne, dass der Web-Entwickler dazu einen Finger rühren muss.  Weitere neue type-Werte sind date, time und datetime (bzw. datetime-local) für Datums- und/oder Zeitangaben, number für numerische Werte, color für RGB-Farbwerte in Hex-Notation oder url für Internetadressen.

Anzeigebeispiel für einige der neuen input-Eingabetypen (Opera 10.01/Linux)

Anzeigebeispiel für einige der neuen input-Eingabetypen (Opera 10.01/Linux)

Für komplexere Fälle kann man über das pattern-Attribut ein Suchmuster in Form eines regulären Ausdrucks angeben, auf welches der Eingabewert zutreffen muss.  Sehr praktisch ist in dieser Hinsicht auch das neue Attribut required.  Wenn es gesetzt ist, muss das betreffende Feld vom Benutzer ausgefüllt werden, unabhängig von möglichen weiteren Werteinschränkungen.

Ein weiteres Highlight des neuen input-Elements ist das autocomplete-Attribut.  Setzt man dieses auf on, so wird dem Browser signalisiert, dass Eingaben in dieses Feld gespeichert und bei zukünftigen Seitenaufrufen zur automatischen Vervollständigung angeboten werden sollen – ein klassischer Anwendungsfall für Suchfelder.  In dieselbe Kerbe schlägt das list-Attribut, wo man die id eines im Dokument angeführten datalist-Elements angeben kann. Die option-Einträge unterhalb der so verknüpften datalist dienen dem input-Element als Eingabevorschläge.

<label for="datalist">Suche Statistiken für…</label>
<input id="datalist" type="text" name="name" list="mylist" />
<datalist id="mylist">
<option value="Joe Montana" />
<option value="Jerry Rice" />
<option value="Steve Young" />
</datalist>

Anzeigebeispiel für ein input-Feld mit Eingabevorschlägen eines datalist-Elements (Opera 10.01/Linux)

Anzeigebeispiel für ein input-Feld mit Eingabevorschlägen eines datalist-Elements (Opera 10.01/Linux)

Nützlich ist ebenfalls das Attribut autofocus.  Ist es bei einem Element gesetzt, so wird dieses automatisch fokussiert, sobald die Seite vollständig geladen ist.  Damit kann ein Benutzer sofort mit dem Ausfüllen eines Formulars beginnen, ohne erst noch das betreffende Eingabefeld extra anklicken zu müssen.

Allein durch diese hier aufgezählten Neuerungen werden zahlreiche gängige JavaScript-Lösungen durch einen einheitlichen Standard obsolet.

Schöne neue Welt

Der Standardisierungs- und Spezifizierungsprozess von HTML5 ist aktuell noch im Gang und soll bis 2010 abgeschlossen werden.  Dieser Artikel stellt nur einen kurzen Streifzug mit einer unvollständigen Auswahl an neuen Elementen dar.  HTML5 kann darüber hinaus auch noch viel mehr – beispielsweise werden JavaScript-Schnittstellen zur Benutzerinteraktion definiert, unter anderem Drag-and-Drop-Support.

Der Haken am neuen Webstandard: die Browser-Unterstützung steckt noch in den Kinderschuhen.  Einzig in puncto Formulare sticht Opera mit Implementierung der meisten neuen Funktionen hervor und auch WebKit-Browser wie Apples Safari sowie Google Chrome können in diesem Bereich schon einiges vorweisen.  video, audio und canvas können zum Teil schon bei Firefox sowie Safari und Chrome verwendet werden. Darüber hinaus gibt es immer wieder nur punktuellen Support für einzelne Features. Die englischsprachige Wikipedia bietet laufend aktualisierte Vergleichstabellen an.

Dies muss jedoch nicht notwendigerweise ein Hindernis für den Einsatz sein.  Dank Graceful degradation werden unbekannte Elemente meist sinnvoll dargestellt.  Stolpert ein Browser beispielsweise in einem Dokument über das ihm unbekannte mark-Element, so wird der Inhalt üblicherweise als normaler Fließtext dargestellt.

Bis auf Microsofts Internet Explorer lassen sich die neuen Elemente grundsätzlich tadellos via CSS formatieren und auch dem Redmonder kann man mit dem HTML5 enabling script (englisch) von Remy Sharp auf die Sprünge helfen. Alternativ kann man dem IE auch mit einem Plugin, Google Chrome Frame (englisch), moderne HTML5-Funktionalität beibringen.

Konkrete Beispiele, wie HTML5 bereits heute schon in freier Wildbahn eingesetzt wird, bietet die HTML5 Gallery (englisch), wo ambitionierte Entwickler von bestehenden Seiten lernen und sich inspirieren lassen können.

Mit HTML5 besteht die große Chance auf eine einheitlichere Browserunterstützung eines Standards. Die teilweise wüsten Auswüchse von browsereigenen Features aus dem ehemaligen Browserkrieg zwischen Netscape und Internet Explorer können ebenso wie diverse Altlasten endgültig entsorgt werden. ™

Markus Seyfferth

Markus Seyfferth

Markus leitet seit April 2019 die Geschicke von Dr. Web, und ist dabei, einige interessante neue Projekte in Angriff zu nehmen. Zuvor war er für mehr als 6 Jahre der Geschäftsführer und Vorstand vom Smashing Magazine, der englischsprachigen Schwesterpublikation von Dr. Web.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.