HTML5, HyperText Markup Language 5

Ein kleines! Lexikon des Internet

Definitionen • Erklärungen • Standards • Techniken

ist die fünfte Überarbeitung des W3C für den Standard der Auszeichnungssprache HTML.
Die Entwicklung wird von zwei Gremien vorangetrieben, dem W3C und der WHATWG. Ziele sind:

Die folgend beschriebenen Neuerungen werden noch sehr unterschiedlich von den aktuellen Browsern unterstützt (¹), da der Standard noch nicht endgültig ist.

Semantik

HTML5 kommt ohne Deklaration einer DTD aus und überlässt dem Browser die Interpretation, es wird nur eine Kurzform am Anfang des Textes gestellt: <!DOCTYPE html>. Auch der beinhaltende Zeichensatz wird mit dem neuen Meta-Tag <meta charset="utf-8" /> vereinfacht. Die Sprache des Inhalts soll nicht mehr über den Meta-Tag <meta http-equiv="content-language" content="de" /> definiert werden, sondern einem Hauptelement zugeordnet werden, z. B. <html lang="de">.

HTML5 erhält für die Struktur neue Elemente, wie <article> (eigentlicher Inhalt), <section> (Unterteilung anderer Elemente), <menu> (Menüstruktur), <nav> (Navigationsbereich), <header> (Kopfbereich), <footer> (Fußbereich), <aside> (Ergänzungen). Die Elemente beschreiben dem Browser den Inhalt, so dass die Usability erhöht wird. Die Formatierung der Elemente wird weiterhin von CSS, insbesondere CSS Level 3, übernommen.

Viele Lösungen, die bisher nur mit JavaScript machbar sind, werden durch neue Elemente vereinfacht. Das Element <details> enthält das Element <summary> und beliebige andere. Angezeigt wird standardgemäß nur der Inhalt von <summary> als Aufklappmenü, der andere Inhalt nur nach einem Klick auf das Element. Das Element <figure>, das z. B. ein Foto enthalten kann, erhält mit dem Element <figcaption> eine einfache Möglichkeit für eine Bildunterschrift.

Formulare

Die meisten Änderungen beziehen sich auf das Element <input>, dem eine Reihe neuer Werte zum Attribut type mitgegeben werden. Wird ein Eingabefeld mit einem bestimmten Typ versehen, übernimmt der Browser die Valiedierung oder das Bereitstellen von Eingabehilfen. Mit <input type=date> wird ein Feld gezeigt, das nur ein Datum enthalten darf, als Hilfe werden Schaltflächen zum Erhöhen oder Vermindern des Wertes oder ein Minikalender, aus dem das Datum ausgewählt werden kann, angezeigt. Mit dem Typ number erlaubt das Feld nur noch Zahlen, die durch weitere Attribute beschränkt werden können, wie max, min oder step. Auch hier werden Auf- und Ab-Pfeile gezeigt. Mit <input type=range> wird ein Schieberegister angezeigt, sofern der Browser es unterstützt. Weitere Typen sind email (E-Mail-Adresse), url (URL), tel (Telefonnummer) und time (Zeit).

Textfelder (type=text) können mit placeholder einen Text anzeigen, der beim Aktivieren automatisch entfernt wird (siehe Suchfeld oben). Mit autofocus wird die Einfügemarke in das entsprechende Feld beim Aufruf gesetzt. list erlaubt die Vorgabe einer Werteliste, die vom Benutzer ergänzt werden kann.

Die Validierung der Eingaben wird größtenteils bei den neuen Feldern vom Browser ohne JavaScript übernommen. Mit dem Attribut pattern kann ein regulärer Ausdruck für die Prüfung verwendet werden. Ein mit CSS formatierter Hinweistext muss weiterhin mit JavaScript realisiert werden.

Multimedia

Für die Wiedergabe von Videos, für die bisher Plug-ins wie Flash notwendig sind, ist das Element <video> vorgesehen, das mit den Attributen src (Pfad der Datei) und controls (Bedienelemente) alles notwendige bereitstellt. Als Codec-Formate sind Ogg Theora (), H.264 () und WebM () in der Auswahl.

Die Wiedergabe von Musik übernimmt das gleich aufgebaute Element <audio>. Welche Codecs – wie z. B. MP3 oder Ogg Vorbis () – unterstützt werden, liegt (noch) beim Hersteller des Browsers.

Animationen oder Anwendungen profitieren vom Element <canvas>, das einen Bereich des Browser-Fensters für das Einfügen von zweidimensionalen Objekten – wie Linien, Füllungen, Bilder, Texte usw. – mit SVG bereitstellt. Dazu ist es möglich, diese in Echtzeit zu rotieren, zu verschieben oder zu skalieren. Die Objekte und die Reaktion auf die Eingaben des Benutzers werden mit JavaScript hinzugefügt.

Web-Apps und API

Mit Hilfe von APIs sollen Browser leichter um Fähigkeiten erweiterbar werden und komplexe Anwendungen ermöglichen.

Mit der Web Storage API wird es möglich, begrenzt Daten auf dem Rechner des Benutzers zu speichern. Zwei Optionen werden zur Verfügung, mit DOM Storage sollen eher kleinere Mengen gespeichert werden, mit IndexedDB steht eine komplette Datenbankstruktur zur Verfügung. Es werden fünf MB Speicherplatz bereitgestellt, wird mehr benötigt, muss der Benutzer sein Einverständnis geben.

Ein so genanntes Manifest enthält alle von einer Anwendung benötigten Informationen (HTML-Dokumente, JavaScript- und CSS-Dateien, usw.) für eine Offline-Benutzung. Der Browser lädt alle enthaltenen Dateien in einen Cache und kann sie so auch benutzen, wenn keine Verbindung zum Internet besteht.

Anwendungen sollen auch von der Drag- and Drop API profitieren, die es ermöglicht, Elemente von einem Browser-Fenster in ein anderes zu verschieben.

W3C - Technical Reports

{HTML5
 - http://www.w3.org/TR/html5/
}
@ W3C

Weiterführende Links

{HTML Working Group
- http://www.w3.org/html/wg/
} @ W3C
{WHATWG
- http://www.whatwg.org/
}
 
 (¹) {HTML5 & CSS3 Readiness
 - http://html5readiness.com/
}
@ html5readiness.com
{HTML5 accessibility
 - http://html5accessibility.com/
}
@ html5accessibility.com
{When can I use...
 - http://caniuse.com/
}
@ caniuse.com