Im ersten Teil der HTML5-Serie konnten Sie alles über neue Präsentationsformen im multimedialen Bereich lesen. Im zweiten Teil beschäftigten wir uns mit den neuen Möglichkeiten zur Datenaufbereitung sowie zur Verknüpfung von Online-Diensten und lokalen Anwendungen. Im dritten Teil ging es weiterführend um neue Methoden der Datenübertragung. Der vierte Teil handelte neue Formularfunktionen und Bibliotheksabfragen, die künftig direkt im Browser stattfinden können, ab. Der fünfte und abschließende Teil unserer Serie beschäftigt sich ausführlich mit weiteren Neuerungen wie Geodiensten, iFrames, Code-Parsing und allgemeinen Verbesserungen in der Entwicklungsumgebung.

Viele der hier besprochenen Features sind eigenständige Projekte und stammen nicht aus der direkten HTML5-Sphäre. Weil sie aber in Teilen auf HTML- und JavaScript-Code bauen, werden sie jetzt so richtig bekannt und könnten mit auf den HTML5-Zug aufspringen.

Geotargeting

Das betrifft beispielsweise JavaScript-Funktionen, die es einem Web-Angebot ermöglichen, Längen- und Breitengrad des aktuellen Aufenthaltsorts des Anwenders zu bestimmen, sofern das eingesetzte Gerät über entsprechende Ortungssysteme verfügt. Das wäre auch ohne HTML5 möglich - mit der fast gleichzeitig stattfindenden Entwicklung von HTML5 und Geotargeting-Diensten ergab sich dem W3C aber die einfache Möglichkeit, eine Spezifikation für eine eigene Geolocation-API zu schreiben.

In erster Linie für Smartphones und andere mobile Geräte gedacht, ist das JavaScript-Objekt "Navigator Geolocation" auch in vielen Desktop-Browsern bereits integriert - darunter Chrome (ab Version 5), Firefox (ab Version 3.5) und Internet Explorer 9. Da Geotargeting ein sensibles Feld ist, muss der Anwender jedoch erst zustimmen, bevor die erhobenen Daten vom Code weiterverarbeitet werden dürfen. Das Feature gibt mögliche Ungenauigkeiten bei der Koordinatenangabe gleich mit aus und zeigt zusätzlich an, wie stark die Abweichungen in der Angabe der Höhe über Normalnull sein könnten. "Navigator Geolocation" arbeitet mit den beiden Funktionen getCurrentPosition und watchPosition. Die erste findet den Standort heraus, die zweite überwacht ihn und stößt wiederum die erste Funktion an, sobald sich ein Wechsel ergibt.

Interessant sind diese Möglichkeiten besonders für mobile Geräte, die beispielsweise Informationen über das Wi-Fi-Netzwerk einholen können, um GPS-Daten zu ermitteln und an das Skript weiterzureichen. Ist der Rechner nicht in der Lage, sich selbst zu orten, wartet das Skript mit der Fehlermeldung POSITION_UNAVAILABLE auf. Um Ihren Browser zu testen, gehen Sie auf diese Seite, klicken Sie die Schaltfläche an und erlauben Sie gegebenenfalls den Skript-Zugriff.

Web Workers

Die "Web Workers"-Spezifikation macht es möglich, Hintergrundprozesse anzustoßen, die laufen, während die Website im Vordergrund unabhängig davon weiter arbeitet. Die wait-, delay- und pause-Kommandos, die bisher nötig waren, um Skripte nacheinander auszuführen, werden überflüssig, weil alles gleichzeitig passieren kann. Das seit Jahrzehnten aus anderen Sprachen bekannte Threading ist für JavaScript neu und wird vielen Web-Entwicklern weiterhelfen. Die Web Workers-Objekte laufen in einer eigenen Sandbox und können keinen direkten Einfluss auf die Website oder das zugehörige DOM (Document Object Model) nehmen. Da Web Workers ausschließlich auf Nachrichtenbasis funktioniert, müssen sowohl das zugehörige Objekt als auch das Skript auf übergeordneter DOM-Ebene den jeweiligen Code enthalten, um Befehle auszutauschen. Vergleichbar ist dies in etwa mit der Client-Server-Kommunikation im gesamten Web - Web Workers übernehmen quasi die Rolle vieler kleiner Server innerhalb eines Client-Computers. Alle wichtigen Browser außer dem Internet Explorer unterstützen Web Workers bereits.

Das Debugging des Quellcodes und die Einbindung von fremden Seiten mittels iFrame werden mit HTML5 um einiges erleichtert. Mehr dazu auf der folgenden Seite.

iFrames

Der Fortschritt in der Web-Entwicklung lässt sich meist daran ablesen, dass weniger und klar verständlichere Codezeilen nötig sind, um das gewünschte Ergebnis zu erhalten. Häufig werden dazu die Möglichkeiten einzelner Tags einfach erweitert. Eine Ausnahme von dieser Regel stellt das <iframe>-Element dar. In HTML5 unterstützt es weniger Features als bisher. Bislang konnten Scrollbalken, Rahmen und Rand des iFrames vom Entwickler definiert werden, der ihn einbettete - künftig muss dies innerhalb des HTML-Codes geschehen, der eingebettet werden soll. Dazu steht unter anderem das neue Attribut "seamless" zur Verfügung, das alle Begrenzungen und Scrollbalken entfernt und den iFrame damit wie ein <div>-Element behandelt, das seinen Inhalt aus einer Drittquelle bezieht. Um die Sicherheit einer Seite zu erhöhen, schaltet das "sandbox"-Attribut viele potenzielle Risiken ab, die ein iFrame mit sich bringt: Nur wenn im Quellcode der Hauptseite, in die ein iFrame eingebunden wird, das Attribute "allow-scripts" oder "allow-forms" vorliegt, werden Skripte und Formulare innerhalb eines iFrames ausgeführt. Die Zusammenarbeit zwischen mehreren Web-Angeboten erleichtert das um einiges. So lassen sich Werbeanzeigen sicher einbetten, weil die Partner der Werber die Kontrolle behalten und sich nicht mehr nur auf den Code seitens der Industrie verlassen müssen.

Einheitliches Parsing

Keine HTML-Spezifikation konnte jemals alle Möglichkeiten und Wege abdecken, auf die die Elemente verwendet wurden und werden - gerade auch auf Seiten der Browserinterpretation. Bestes Beispiel sind die <script>-Tags: WebKit-Browser lassen sie mit Skriptangaben aus Drittquellen zu, sofern sie mit einem / wieder geschlossen werden (nach dem Muster <script URL />). Alle anderen Browser verbieten Fremdquellen grundsätzlich. Um die vielen Workarounds und Behelfsszenarien zu vereinheitlichen, wurde die Parsing-Spezifikation entwickelt, die den Browsern Regeln an die Hand gibt, die beim Interpretieren von Quellcode zwingend zu befolgen sind. Auch enthält sie Vorschläge, wie mit dem größten Problemfall im Debugging, dem <table>-Element, umzugehen haben - Korrekturfunktion inklusive.

Da bei den vielen Hundert Regeln schnell die Übersicht verloren geht, sei hier beispielhaft nur der Umgang mit MathXML- und SVG-Dateien erwähnt, die in HTML5 nun inline eingebunden werden können und zum Bestandteil regulären HTML-Codes werden:

<math> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo>&minus;</mo> <mi>b</mi> <mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>&minus;</mo> <mn>4</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> <mo>&InvisibleTimes;</mo> <mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> </mrow> </mfrac> </math>

Diese so genannten semantischen Erweiterungen auf Textebene sind vergleichbar mit der im zweiten Teil der HTML5-Serie schon vorgestellten Microdata-Tags, die maschinenlesbaren, für den Anwender aber unsichtbaren Meta-Elemente wie <time> für Zeitangaben oder <abbr> für Akronyme, die für mehr Semantik im Netz sorgen sollen.

HTML5 kann mit dem Browser-Verlauf interagieren, um die Navigation im Web zu verbessern. Auch können bereits vollzogene Aktionen rückgängig gemacht werden. Alles dazu finden Sie auf der folgenden Seite.

Verlaufs-API

Das History-Objekt macht es möglich, in begrenztem Umfang mit dem Browser-Verlauf zu kommunizieren. Stellen Sie sich vor, Sie klicken durch eine 100teilige Bilderstrecke und möchten danach auf die Seite zurück, auf der Sie vorher gewesen sind. Bisher erforderte das reichlich Geduld mit dem "Zurück"-Button in der Menüleiste des Browsers. In HTML5 schafft JavaScript nun Abhilfe:

<script type="text/javascript"> function changeURL(url, title) { if (typeof history.pushState == "undefined") { alert("Browser doesn't allow changing history with pushState"); } else { var state = {address : url}; window.history.pushState(state.address, title, url); } </script>

Wichtigster Effekt der Verlaufs-API ist das flüssigere Navigieren über den Browser und durch seine Verlaufslisten. Hier besteht für Entwickler noch viel Raum für Experimente.

Rückgängig-Funktionen

Viele der vorgestellten neuen Features machen den Browser vom reinen Darstellungsmedium zu einem Kommunikationskanal. Um die clientseitigen Eingaben aber auch richtig verwalten zu können, fehlt noch eine Rückgängig-Funktion. Hier kommen die Undo Transaction History und das UndoManager-Objekt ins Spiel. Zumeist sind es Formulareingaben, die in der Undo Transaction History gespeichert werden. Mittels des UndoManager können diese Daten dann auch noch nachträglich verändert werden - je nachdem was der Entwickler zulässt.

Textstrukturierung

Um die Übersichtlichkeit im Quellcode zu verbessern und textlastige Websites ansprechender zu gestalten, führt HTML5 abseits der althergebrachten <div>-Bereiche zahlreiche neue Tags ein. Wer in XML arbeitet, wird sich in dieser Art der strukturierten Auszeichnung schnell zurechtfinden. <article> zeichnet Anfang und Ende eines Artikels aus, <section> bezeichnet einen Absatz innerhalb eines Artikels, <nav> wird für Navigationselemente verwendet. Weitere Beispiele sind unter anderem <aside> (Inhalte, die nicht Hauptbereich einer Seite gehören), <footer> und <header> (Fuß- und Kopfzeile unter / über einem Absatz oder einer Seite) sowie das Meta-Elemente <hgroup> (Informationen über einen Absatz innerhalb eines Artikels). In Kombination mit den Überschrift-Elementen <h1> bis <h6> ergeben sich weitere Möglichkeiten der (verschachtelten) Strukturierung.

Auf der folgenden letzten Seite der HTML5-Serie stellen wir Ihnen noch einmal alle neuen Elemente vor.

Übersicht: Was neu ist

In der folgenden Tabelle finden Sie noch einmal alle neuen Elemente samt Beschreibung:

Die neuen HTML-Tags

<article>	Artikel
<aside>	Inhalt außerhalb des Seiten-Hauptinhalts
<audio>	Audio-Inhalt
<canvas>	grafisches Elements
<command>	Befehlsschaltfläche
<datalist>	Auswahlliste
<details>	Details eines Seitenelements
<embed>	Externer interaktiver Inhalt / Plug-in
<figcaption>	Beschreibung eines grafischen Elements
<figure>	Gruppe von Medienelementen und deren Beschreibungen
<footer>	Fußzeile eines Absatzes / einer Seite
<header>	Kopfzeile eines Absatzes / einer Seite
<hgroup>	Informationen über einen Absatz innerhalb eines Dokuments
<keygen>	Generiertes Schlüsselpaar innerhalb eines Formulars
<mark>	Hervorgehobener Text
<meter>	Messwerte aus einem vorgegebenen Messbereich
<nav>	Navigationselement
<output>	Verschiedene Arten der Ausgabe
<progress>	Fortschrittsanzeige einer beliebigen Operation
<rp>	Beschreibt, was Browser, die das <ruby>-Element nicht unterstützen, stattdessen anzeigen sollen (vergleichbar mit dem früheren <noframes>)
<rt>	Erklärung der Ruby Annotations
<ruby>	Ruby Annotation
<section>	Absatz / Artikelbereich
<source>	Medienquelle
<summary>	Kopfzeile eines <detail>-Elements
<time>	Datum / Zeit
<video>	Video
<wbr>	Möglicher / erlaubter Zeilenumbruch (für kleine Bildschirme etc.)

Übersicht: Was nicht mehr unterstützt wird

Abschließend die Aufstellung der Elemente, die nicht mehr unterstützt werden:

Der Artikel stammt von Peter Wayner von unserer US-Schwesterpublikation InfoWorld. (sh)