Einführung in HTML5
Seit den Anfängen des Internets gilt HTML (Hypertext Markup Language) als Standard für die Strukturierung, Vernetzung und plattformunabhängige Bereitstellung von Inhalten im World Wide Web. Dennoch lag die Weiterentwicklung dieser essenziellen Auszeichnungssprache nach der Veröffentlichung von HTML 4.01 im Dezember 1999 im Grunde brach. Umso schneller schritt hingegen die Entwicklung des Internets voran. Surfen ist heute nicht mehr dasselbe wie zur Jahrtausendwende.
Neben Texten und Bildern sind es vor allem Multimedia-Elemente, die das Internet zu dem machen, was es heute ist. Hinzu kommt das stetig wachsende Interesse an mobilen Angeboten. Die moderne Webnutzung ist der Auszeichnungssprache aus dem letzten Jahrtausend längst entwachsen. Und so stützen sich aktuelle Webseiten auf eine Vielzahl proprietärer Plug-ins, um den Ansprüchen von Programmierern, Webpublishern und Verbrauchern gerecht zu werden. Die Folge sind Inkompatibilitäten und Sicherheitslücken. Die fünfte Version der Hypertext-Auszeichnungssprache soll damit nun Schluss machen. Bereits am 28. Oktober 2014 legte das World Wide Web Consortium (W3C) das HTML5-Grundgerüst als neue Kernsprache für das WWW vor. Doch noch immer setzt ein Großteil der Webseitenbetreiber auf die Vorgängerversion oder überholte Kompromisse wie XHTML. Das wird sich bald ändern.
Über die Entwicklung von HTML5
Anders als ihr Vorgänger ist die fünfte Version der Hypertext-Auszeichnungssprache ein Produkt zweier parallel arbeitender Entwicklergruppen. Als das W3C das Projekt HTML nach Veröffentlichung der Version 4.01 auf Eis legte und sich stattdessen auf die Weiterentwicklung von XHTML konzentrierte, regte sich bei zahlreichen Organisationen Unmut über den neuen Kurs des Standardisierungsgremiums. Gerade Softwareunternehmen und Browserherstellern war die schleppende Entwicklung von Webstandards durch das W3C ein Dorn im Auge. Als Reaktion auf die Neuausrichtung der W3C folgte die Gründung der Arbeitsgruppe Web Hypertext Application Technology Working Group (WHATWG), die sich der Weiterentwicklung des HTML-Standards verschrieb und vor allem die Einbettung von Anwendungen in den Fokus rückte. Bereist 2004 präsentierte die WHATWG einen ersten Vorschlag für HTML5. Dieser überzeugte letztlich auch das W3C, das nur zwei Jahre später wieder eine eigene Arbeitsgruppe mit der Weiterentwicklung von HTML5 auf Basis der WHATWG-Version beauftragte. 2009 gab das W3C schließlich das Ende der XHTML-Entwicklung bekannt. Stattdessen konzentrierte man sich auf die Ausarbeitung der HTML5-Spezifikation in Kooperation mit der WHATWG.
Warum HTML5?
Während Webseiten in der Anfangszeit des Internets lediglich der Darstellung von Inhalten dienten, steht heute die Interaktion mit dem Onlineangebot im Mittelpunkt. Webseitenbesucher verstehen sich nicht länger als passive Rezipienten, sondern wollen Anwender sein. Seitenbetreiber stillen dieses Verlangen mit interaktiven Kontaktformularen, Kommentarfunktionen oder Social-Media-Integrationen. Hinzu kommen Onlinespiele, die sich direkt im Webbrowser aufrufen lassen. Mit HTML 4.01 konnte ein solcher Funktionsumfang nur durch externe Plug-ins bereitgestellt werden.
Der neue Webstandard HTML5 zeigt genau hier seine Stärken. Neben den klassischen HTML-Tags in spitzen Klammern beinhaltet das HTML5-Grundgerüst spezifizierte Auszeichnungen (siehe unten), Multimedia-Elemente sowie zahlreiche Programmierschnittstellen (Application Programming Interfaces, APIs), die in Kombination mit JavaScript zur Verfügung stehen. Proprietäre Plug-ins privater Anbieter wie beispielsweise Adobe Flash gehören somit der Vergangenheit an. Programmierer können mit HTML5 unabhängig von Softwarefirmen arbeiten und somit sichere, barrierefreie Webseiten erstellen. Der folgende Überblick führt in die HTML5-Neuerungen ein und zeigt eine Auswahl zentraler Elemente.
Neue HTML-Elemente
Eine bahnbrechende Neuerung ist die Einführung neuer HTML5-Elemente zur semantischen Auszeichnung. Während HTML 4.01 lediglich eine Grobstrukturierung durch verschiedene div-Elemente vorsah, bieten spezifizierte Auszeichnungen wie <section>, <nav>, <article>, <aside>, <header>, <footer> oder <main> die Möglichkeit, in HTML5 zu definieren, um welche Art von Inhalt es sich bei dem jeweiligen Element handelt.
| Tag | Funktion |
|---|---|
| <section> | Definiert einen Abschnitt innerhalb eines HTML5-Dokuments. |
| <nav> | Definiert einen Abschnitt als Navigationsleiste. In der Regel finden sich hier Verweise zu untergeordneten Seiten. |
| <article> | Zeichnet einen Abschnitt als eigenständigen Inhalt innerhalb eines HTML5-Dokuments aus. |
| <aside> | Definiert einen Abschnitt als Randbemerkung. |
| <header> | Definiert einen Abschnitt als Kopfbereich. In der Regel finden sich hier Logos, der Titel der Webseite und die Navigation. |
| <footer> | Definiert einen Abschnitt als Fußbereich. In der Regel werden hier Kontaktinformationen oder Copyright-Hinweise untergebracht. |
| <main> | Zeichnet einen Abschnitt als Hauptinhalt einer Webseite aus. Das main-Tag kann pro HTML5-Dokument nur einmal verwendet werden. |
Die semantische Auszeichnung von Webseitenabschnitten hat einen großen Vorteil: Sie erleichtert Suchmaschinen das Crawlen eines HTML-Dokuments. Die Suchbots lieben bekanntlich gut strukturierte Webinhalte. Webseitenbetreiber, die dem Crawler die Interpretation eines HTML5-Dokuments durch entsprechende Tags erleichtern, haben gute Chancen auf ein besseres Ranking in der Suchergebnisliste.
Multimedia-Integration
Mit HTML gestaltet sich die Einbindung von Video- und Audiodateien ebenso leicht wie die Integration von Bildern. Dazu dienen die HTML5-Elemente <audio> und <video>, durch die der Umweg über Plug-ins künftig nicht mehr erforderlich ist.
| Tag | Funktion |
|---|---|
| <audio> | Zeichnet eine Datei als Audiodatei aus. |
| <video> | Zeichnet Videoinhalte inklusive Tonspur aus. |
Programmierschnittstellen
HTML5 hält für Programmierer eine Reihe von JavaScript-Objekten bereit, die sich als APIs in HTML5-Dokumente integrieren lassen. Folgende Tabelle zeigt eine Auswahl entsprechender HTML5-Elemente, die es Programmierern erleichtern, verschiedene Anforderungen an moderne Webseiten zu erfüllen.
| API | Funktion |
|---|---|
| Canvas | Mit dem Canvas-Element können Programmierer einen bestimmten Bereich eines Dokuments mit HTML5 definieren, um mittels JavaScript dynamische Bitmap-Grafiken einzubinden. Neben Linien, Rechtecken und Kreisbögen unterstützt das Element Bézierkurven, Farbverläufe, Grafiken in den Formaten PNG, GIF und JPEG sowie Transparenz und Text. Ein klassischer Verwendungszweck für <canvas> ist die Integration von Diagrammen. Möglich sind jedoch auch komplexe Anwendungen bis hin zu Onlinespielen. |
| Drag-and-Drop | Das Drag-and-Drop-API ermöglicht das Verschieben von Objekten innerhalb eines HTML5-Dokuments oder zwischen zwei Webseiten. |
| Offline-Applications | Durch das API Offline-Applications stehen Webapplikationen auf HTML5-Seiten auch dann zur Verfügung, wenn keine Verbindung zum Internet besteht. Relevant ist dies vor allem für die mobile Internetnutzung per Smartphone. Dazu wird eine Anwendung mit allen benötigten Inhalten in den Application Cache geladen. |
| Geolocation | Mit Geolocation unterstützt HTML5 ein JavaScript-API, das es ermöglicht, den aktuellen Standort eines Webseitenbesuchers auszulesen. In der Regel wird ein Besucher beim Laden einer HTML5-Seite mit Geolocation-API gefragt, ob er die Standortermittlung zulassen möchte. |
Arbeiten mit HTML5
Für einen schnellen Einstieg in den neuen Webstandard gibt es zahlreiche HTML5-Tutorials im Internet. Als erste Anlaufstelle empfiehlt sich die Website www.selfhtml5.org. Eine Auswahl hilfreicher Ressourcen für Webentwickler bietet zudem das Mozilla Developer Network. In der Regel wird die Auszeichnungssprache von den aktuellen Versionen gängiger Webeditoren unterstützt. Einen speziellen HTML5-Editor müssen Sie sich somit nicht anschaffen. Wie für jeden offiziellen Webstandard hält das W3C auch für HTML5 den Validator bereit. Mit diesem können Sie HTML-Dokumente kostenlos auf Konformität prüfen. Die Validierung des HTML-Mark-ups einer Webseite ist dabei ein wichtiger Schritt in der Qualitätssicherung.