© cafaphotos, 123RF.com

Die Architekten sozialer Netzwerke und Entwickler von Webanwendungen empfinden HTML 4.01 und mehr noch DOM 2 schon einen ganze Weile als Hemmschuh. Beide Standards stammen aus dem Jahr 1999. Sieben lange Jahre, bis 2007, widerstand das Konsortium W3C dem Drängen der Browserhersteller, die Arbeit an der HTML-Spezifikation wieder aufzunehmen.

Web-Modernisierung

Bereits 2004 wollten jedoch Mozilla, Opera und Apple nicht länger untätig bleiben: Sie gründeten die Web Hypertext Application Technology Working Group (WHATWG), die mit Web-Applications 1.0 einen eigenen Quasi-Standard schuf, der den Anforderungen der immer komplexer werdenden Webanwendungen Rechnung tragen sollte.

Ende 2007 hatte die Browser-Allianz das W3C überzeugt. Ihre Vorschläge dienten als Basis für die nächste Version des HTML-Standards (Tabelle 1). Viele ursprünglich enthaltenen Technologien hat das W3C inzwischen in eigene Dokumente ausgegliedert und entwickelt sie nun unabhängig von HTML 5. Dazu zählen innovative Technologien wie Server Sent Events, mit denen Ajax-Anwendungen effizienter auf Server-Ereignisse reagieren, oder Index DB, eine im Browser eingebaute Datenbank [1].

Die neuen multimedialen Fähigkeiten von HTML 5 stehen im Publikumsinteresse an erster Stelle. Der Standard definiert zwei neue Tags zum Einbinden von Multimedia-Inhalten: »<video>« und »<audio>«. Die schlechte Nachricht zuerst: HTML 5 empfiehlt keine Codecs für die Video- und Audio-Komprimierung. Daher ist nicht gewährleistet, dass gängige Browser standardkonform eingebundene Mediendateien abspielen. Die derzeit üblichen Player in Flash-Technologie dürften also trotz ihrer Stabilitätsprobleme nicht so schnell verschwinden (siehe Abbildung 1).

Abbildung 1: Trotz HTML 5 werden sich in Flash implementierte Videoplayer noch eine Weile halten – und damit auch diese besonders auf 64-Bit-Systemen verbreiteten, nach unten gezogenen Mundwinkel.

Die Multimedia-Tags dürfen für die eingebunden Elemente mehrere alternative Quellen nennen. Der Browser wählt die erste Datei aus der Liste, die er verwerten kann. Ist das »controls«-Attribut gesetzt, zeigt er Abspielen-, Pause- sowie Vor- und Rückspulen-Buttons an. Als Alternative zu diesem eingebauten Player gibt es zur Steuerung ein Javascript-API. Youtubes Betaversion [11] nutzt es für eine vom bisherigen Flashplayer kaum unterscheidbare Benutzeroberfläche.

Aus patentrechtlichen Gründen enthält Firefox in der stabilen Version 3.6 nur den kaum noch konkurrenzfähigen freien Theora-Codec. Im Mai 2010 veröffentlichte Google das Web-M-Videoformat, ein Paket aus einem Matroska-Container, Ogg-Audio-Komprimierung und dem Google-eigenen VP8-Video-Codec, unter einer freien Lizenz [12]. Firefox 4 Beta, Opera 10.60 und die gegenwärtig noch instabile Chrome-Version 6 binden Web-M out of the Box ein. Der Internet Explorer unterstützt zwar die »<video>«- und »<audio>«-Tags, bringt aber auch in Version 9 (Preview 3) noch keine eingebauten Codecs mit.

Nach Googles Meinung ist das Web-M-Paket patentfrei. Dies auch für die Zukunft zu garantieren ist leider beim gegenwärtigen Zustand des Patentsystems kaum möglich, da Patentinhaber allzu häufig Klagen vom Zaun brechen.

Abbildung 2: Mit dem Canvas-Element entstehen im Browser komplexe, interaktive grafische Anwendungen wie das Malprogramm Canvaspaint [15].

Malermeister

Mit dem in HTML 5 enthaltenen Canvas-Element bleiben Webanwendungen nicht mehr länger darauf beschränkt, Text, Rechtecke oder vorgegebene Grafiken anzuzeigen. Ähnlich wie in Cairo oder Qt zeichnet Javascript nun in Echtzeit und ohne Kontakt zum Server Linien, Kreisbögen oder die aus Zeichenprogrammen bekannten, organisch wirkenden Bezier-Kurven. Für Canvas existiert auch ein Befehl zum Füllen von Kurvenzügen. Bitmaps lassen sich einbinden, drehen, skalieren und mit einer Reihe von optischen Effekten versehen.

Praktisch ist das »<canvas>«-Tag also überall dort, wo eine Webanwendung live Diagramme zeichnet, Bitmaps ein- und ausblendet, sie skaliert oder rotiert (Abbildung 2). Noch effektvoller ist die 3-D-Variante (Abbildung 3), die der Entwickler nicht wie den 2-D-Canvas mit einer einfachen Zeichensprache programmiert, sondern mit Open GL ES 2.0 [13], einer ursprünglich für Mobilgeräte konzipierten Open-GL-Variante. Den Internet Explorer ausgenommen unterstützen die aktuellen Browser das Canvas-Element bereits gut. Die von Google entwickelte freie Javascript-Software Explorer Canvas [14] rüstet beim Microsoft-Browser die Zeichenfunktionen nach.

Abbildung 3: Kein Screensaver, sondern ein Browser-Fenster: Dank Open GL ES 2.0 läuft bestehender Open-GL-Code dort teilweise ohne größere Anpassungen.

Thematische Struktur

Um zu bewerten, ob gefundene Suchbegriffe auf einer Seite in inhaltlichem Zusammenhang stehen, werten die Suchmaschinen in der Regel lediglich den Wortabstand aus. Der spiegelt die inhaltliche Nähe aber nur sehr grob wieder. HTML 5 führt daher an Docbook [16] angelehnte neue Tags ein, mit denen Autoren die thematische Struktur explizit im HTML-Code hinterlegen (Tabelle 3). Den möglichen Aufbau einer Blog-Seite zeigt Abbildung 4. Wie zu sehen ist, lassen sich viele der strukturierenden Tags, etwa »<section>«, »<header>« oder »<footer>«, ineinander verschachteln.

Abbildung 4: An Docbook angelehnte Tags legen in HTML 5 die Seitenstruktur für Suchmaschinen offen.

Das »<aside>«-Tag (Tabelle 2) beispielsweise könnte viel Zeit bei der Recherche sparen, indem es Treffer für Schlagwörter unterbindet, die in Bereichen ohne direkten Bezug zum Kernthema stehen. Fraglich ist allerdings, ob die Webmaster es einsetzen werden, da es auch die Zahl der Pageviews reduziert.

Für die Browser gibt es bei den Seitenstruktur-Tags wenig zu tun. Damit sie sich mit CSS formatieren lassen, darf der Browser sie jedoch nicht als unbekannt verwerfen. Dies ist bisher erst in Firefox 4 Beta und Chrome sichergestellt. In HTML 4 stehen »<i>« und »<b>« für kursiv und fett gedruckten Text. Sie durchbrechen damit das Prinzip der Trennung von semantischer Auszeichnung (HTML) und optischer Darstellung (CSS).

Der neue Standard HTML 5 definiert die beiden Tags daher nicht mehr typografisch, sondern weist ihnen eine semantische Bedeutung zu (Tabelle 3): »<i>« soll in Zukunft einen Fachausdruck oder einen fremdsprachlichen Ausdruck kennzeichnen, »<b>« einen Schlüsselbegriff. Die optische Darstellung überlässt der Standard dem Browser, falls dies nicht ein zugeordneter CSS-Style regelt.

Textmarker

Weder »<b>« noch »<i>« dienen in HTML 5 dazu, einzelne Wörter zu betonen. Für diesen Zweck gibt es im neuen Standard drei Tags, darunter zwei alte Bekannte, die wie »<i>« und »<b>« in eine neue Rolle schlüpfen: Das Emphasize-Element »<em>« kennzeichnet die Betonung auf sprachlicher Ebene, wie sie in der Satzmelodie zum Ausdruck kommt. »<strong« soll dagegen die sachliche Bedeutung des eingeschlossenen Textes hervorheben, »<mark>« dient zur nachträglichen Hervorhebung in zitiertem Text. »<small>« reduziert dagegen die Bedeutung des ausgezeichneten Textes, was in der Anzeige durch eine kleinere Schrift zum Ausdruck kommen kann, aber keinesfalls muss.

Je nach Betrachtungsweise wirkt die dreifache Untergliederung der Betonung differenziert oder allzu penibel. Einerseits ist eine genaue semantische Auszeichnung der Webseiten für eine gezielte Recherche Gold wert. Andererseits steht und fällt ihr Wert damit, wie schnell sie ins Bewusstsein durchschnittlicher Webdesigner vordringt. Bei den Browsern angekommen ist bisher lediglich das »<mark>«-Element, und zwar nur in Firefox 4 Beta und Chrome 6 Beta.

Bei den Eingabeformularen, einem wichtigen Bestandteil einer Webanwendung, bessert HTML 5 kräftig nach: Im neuen Standard gibt es Felder für E-Mail-Adressen, Telefonnummern, URLs, Uhrzeit sowie Datum plus Uhrzeit und für Farbwerte (vergleiche Tabelle 4). Der Browser prüft für den angegebenen Datentyp die Eingabe vor dem Abschicken des Formulars. Abbildung 5 zeigt eine Validierung, wie sie bisher nur in Opera funktioniert. Auch die Zahleneingabefelder mit Erhöhen- und Vermindern-Buttons validieren die Daten nach definierbaren Maximum- und Minimumwerten. Außerdem gestalten sie die Eingabe komfortabler.

Abbildung 5: In Opera funktioniert die im Browser eingebaute Validierung von eingegebenen E-Mail-Adressen und »number«-Inputs mit Maximum- und Minimumwerten bereits. Zusätzlicher Komfort: Das Kalender-Widget zeigt der Browser bei Datumsfeldern automatisch an.

In HTML5 lassen sich nicht nur standardisierte Datentypen wie E-Mail-Adressen oder URLs ohne Skript prüfen: Mit dem »required«-Attribut macht der Entwickler eine Eingabe obligatorisch, »pattern« gibt einen regulären Ausdruck für den Werte-Check an. Ist das »placeholder«-Attribut gesetzt, so zeigt der Browser einen Platzhalter-Text wie »[E-Mail eingeben]« an, der bei der Eingabe verschwindet. Firefox 4 unterstützt bereits einige wenige Elemente des neuen Formular-Standards, Chrome und Opera einen deutlich größeren Prozentsatz (Tabelle 4).

Erwähnenswert ist in Sachen Semantik noch das »<time>«-Tag: Es umschließt Formulierungen wie »<time datetime=”2010-7-31T21:18:12-02:00″>am späten Abend desselben Tages</time>« und weist ihnen einen maschinenlesbaren Wert inklusive Zeitzone zu [17].

Alte Sünden

Als einer der größten Hemmschuhe beim Entwickeln von Webanwendungen gilt die DOM-Schnittstelle, mit der Javascript auf bestehende Elemente einer HTML-Seite zugreift oder neue hinzufügt. Hier beseitigt das W3C Altlasten und übernimmt einige nützliche Microsoft-Techniken. So ist die in allen gängigen Browsern seit Jahren enthaltene Methode »innerHtml()«, ohne die Webentwickler nur schwer leben können, endlich Teil des Standards.

Für das Anwählen aller Elemente einer CSS-Klasse, ohne das kaum eine Webanwendung auskommt, müssen Entwickler nicht länger mit selbst geschriebenem Javascript-Code den gesamten DOM-Tree durchkämmen: Die Methode »getElementByClassname()« erledigt das nun einfacher und schneller. Die gängigen Browser unterstützen sie bereits, der Internet Explorer allerdings erst ab der kommenden Version 9.

Neu ist auch »outerHTML()«, das ein ganzes Element mit neuem HTML-Code überschreibt, nicht bloß dessen Inhalt wie bei »innerHTML()«. Chrome, Opera und der Internet Explorer 9 kennen diese Methode. Dagegen fügt »insertAdjacentHTML()« neuen Code unmittelbar vor oder nach einem Element sowie als dessen erstes oder letztes Kind ein. In Opera, Chrome und dem Internet Explorer funktioniert dies bereits.

Wichtig für Webanwendungen ist auch das Drag-&-Drop-API. Die Spezifikation folgt jedoch leider allzu nah der Vorgabe, die Microsoft zur Kernzeit des Browserkrieges hektisch zusammengezimmert hatte, und ist oft Gegenstand von Kritik. Umgesetzt ist das umstrittene API außer im Internet Explorer bereits in Firefox und Chrome. Das »contenteditable«-Attribut und das zugehörige Javascript-API standardisiert eine im Internet Explorer seit 1999, in Mozilla seit 2003, später auch in Opera umgesetzte Technik, auf der so genannte Rich-Text-Editoren wie der CK-Editor (ehemals FCK-Editor, [18]) aufsetzen. Der im Browser eingebaute Editor ist heute in Firefox, Opera Chrome und im Internet Explorer verfügbar.

Erweitertes Angebot

Fraglos gibt HTML 5 der verbreiteten Web-Auszeichnungssprache mit ihren seit vielen Jahren nicht mehr aktualisierten Standards neuen Auftrieb. Doch hat das W3C die mächtigsten neuen Technologien für leistungsfähige Webanwendungen aus dem HTML-Standard ausgegliedert [1]. Dazu gehören die Web-Sockets, mit deren Hilfe sich Server und Browser Nachrichten schicken. Dies erspart es einem Chat-System, im Sekundentakt beim Server nach neuen Messages zu sehen oder die Ajax-Verbindung dauerhaft offen zu halten, was pro Besucher einen Apache-Thread inklusive Skript-Interpreter im Speicher bindet.

Mit dem Web-Storage-API, das bis auf die viel größere erlaubte Datenmenge den üblichen Cookies ähnelt, speichert ein CMS in kurzen Abständen die eingegebenen Daten – am besten in einem im Hintergrund ausgeführten Worker-Thread, der den Browser nicht blockiert. Stürzt der Browser vor dem Versenden der Daten ab, bleiben diese trotzdem Client-seitig verfügbar. Das Query-Selector-API überträgt die komfortablen CSS-Selektoren aus Bibliotheken wie Jquery in den Standard.

Diese und andere Web-Technologien wie die Microdata-Spezifikation, die dem bisher bloß in den Köpfen der W3C-Mitglieder existierenden semantischen Web zu neuem Schwung verhelfen könnten, sind einerseits vom Umfang her besser in einer eigenständigen Spezifikation aufgehoben. Andererseits koppelt diese Ausgliederung sie aber von der spürbaren Akzeptanz und Aufbruchstimmung in Sachen HTML 5 ab. Dabei wären sie für leistungsfähige und zukunftsträchtige Webentwicklungen ebenso wichtig wie der neue HTML-Standard. (mhu)