Aktuell unterstützen die verschiedenen Browser HTML5 sehr unterschiedlich. HTML5 führt einige Vereinfachungen für Web Entwickler ein und ergänzt den bestehenden Standard um weitere Features.
Einige Punkte sind bereits heute ohne HTML5 in Verbindung mit Javascript und/oder Browser-Plugins wie Adobe Flash möglich. Entsprechende Plugins erfordern oft mehr Systemleistung und es werden immer wieder Sicherheitslücken entdeckt.
Im folgenden möchte ausgewählte, interessante HTML5-Neuerungen auflisten. Einen umfassenderen Einblick in HTML bekommt man z.B. über das Buch „HTML5 – Webseiten innovativ und zukunftssicher“ von Peter Kröner.
Einfach.
Als Doctype reicht ein allgemeines <!DOCTYPE html>. Um die Kodierung auf UTF-8 zu setzen (Standard in HTML5) wird folgendes meta-Tag verwendet: <meta charset=”utf-8″>. Seit HTML5 ist die Reihenfolge der Überschriften egal, dass vorher durfte ein h2-Tag nicht unterhalb einer h3-Überschrift stehen usw. Links können nun alles umschließen (auch Blockelemente, Überschriften usw.). Bestimmte Attribute können wieder einfach angegeben werden, die XML-konforme Schreibweise wie checked=“checked“ ist nicht mehr nötig, aber erlaubt.
Semantik.
Neue Tags sorgen für eine erweiterte Semantik des HTML-Dokuments:
- section – inhaltliche Gliederung
- header, footer
- nav – Navigation
- aside – Ergänzung zum Hauptinhalt
- article – abgeschlossener, zusammen gehörender Inhalt, z.B. Blog-Post, News
Für ältere Browser, wie Internet Explorer vor Version 9, gibt es Skripte, um die neuen Tags nutzen zu können.
Formulare.
Neue Input-Typen: search, email, url, number, range, color. In Opera wurden diese Typen wohl als erstes unterstützt. In einigen Browsern von Mobilgeräten wird die Anzeige der Eingabetasten, Tastatur, dem Input-Typ angepasst, z.B. eine Art Nummernblock für den Typ „number“.
Über das Attribut „placeholder“ kann nun ohne Javascript ein Platzhalter gesetzt werden, der nur angezeigt wird, wenn das Feld noch keinen Wert enthält.
Offline-Anwendungen.
Neben einem erweiterten lokalen Speicher, bestimmte Teile einer Webanwendung offline verfügbar zu machen. Über ein sogenanntes „Cache Manifest“ kann man festlegen, welche Dateien (HTML, Bilder, CSS, JS) offline gespeichert werden dürfen, welche nicht lokal gecached werden sollen. Außerdem kann man Fallback-Seiten eintragen, die angezeigt werden, wenn die eigentlich angeforderte Seite nicht verfügbar ist. Über Javascript kann der aktuelle Status (online/offline usw.) mit Hilfe bestimmter Events abgefragt werden.
Weitere Medien.
Über die audio-, video-Tags können nun Musik und Videos ohne Browser-Plugin abgespielt werden. Damit können diese Elemente auch per CSS und Javascript angesprochen und angepasst werden. Allerdings haben die Browserhersteller sich derzeit noch nicht über einheitliches Video-Format geeinigt. Gründe dafür sind wohl vor allem unterschiedliche Qualitätsansprüche und Lizenzen. Es ist möglich, mehrere Videos in unterschiedlichen Formaten als Parameter einzutragen. Der Browser spielt dann jeweils das von ihm unterstützte Format ab.
Über das canvas-Tag können 2D-Grafiken dynamisch erzeugt werden. Mit WebGL ist es sogar möglich hardwareunterstützte 3D-Grafiken direkt im Browser berechnen und anzeigen zu lassen.
Damit rechenintensiver Javascript-Code nicht mehr die komplette Seite im Browser blockiert können Web Worker eingesetzt werden. Diese führen die Anweisungen parallel aus. Die „gefühlte“ Wartezeit für den Benutzer wird kürzer.
Fazit.
Durch HTML5 werden einige Features standardisiert eingeführt, die vorher jeder auf seine Weise implementierte. Außerdem werden durch einige Neuerungen die Möglichkeiten für Entwickler und das damit verbundene Erlebnis für den Besucher verbessert.