HTML 5.2 – Das moderne Web verstehen

Am 14.12.2017 war es soweit: Das World Wide Web Consortium (W3C) veröffentliche die neue HTML 5.2 Spezifikation. W3C ist ein Zusammenschluss aus verschiedenen Mitgliedsorganisationen, einem fest angestellten Team und Teilen der Öffentlichkeit, die daran arbeiten, Web-Standards zu entwickeln. Zweck dieser Standards ist es zu beschreiben, was HTML ausmacht. Sie helfen Entwicklern, das Web in seinen Technologien voranzubringen. Mit HTML 5.2 kommen und gehen Features, Fehler werden behoben; neue HTML-Konstruktionen werden erlaubt oder gelten von nun an als invalide. Heute bedeutet Webentwicklung noch einmal mehr, sich an die Anforderungen und Bedürfnisse einer immer größer werdenden Nutzergruppe anzupassen und diese bestmöglich zu erfüllen. Statistiken zeigen, dass seit Ende 2016 der Großteil aller Internetzugriffe von mobilen Endgeräten ausgeht. Mit Blick auf den neuen HTML Standard möchte man sich im Folgenden auf einige Neuerungen konzentrieren.

W3C macht mobil

Ein wohl von vielen herbeigesehntes Feature ist das <dialog> Element. Mit ihm lassen sich nun auf einfache Weise Dialog-Boxen bzw. interaktive Komponenten/Fenster erzeugen, die sich dann im Vordergrund der Website öffnen, um mit dem Benutzer zu kommunizieren und zu interagieren. Diese sind von Grund auf unsichtbar und müssen mittels Funktionen erst eingeblendet werden.

Bisher konnten Dialog-Boxen meist nicht gut mit Screenreadern benutzt werden, außerdem lies die Bedienung mit einer Tastatur viele Wünsche offen. Durch die Standardisierung in HTML 5.2 sollten diese Probleme zukünftig abnehmen. Zwar wird das <dialog> Element im Bereich der Desktop-Browser zurzeit nur von Chrome unterstützt, im mobilen Bereich sind es jedoch schon Chrome for Android, UC Browser for Android sowie Samsung Internet, die ihren Nutzern die Darstellung des vor allem für tragbare Geräte vielversprechenden Dialog-Fensters ermöglichen.

3, 2, 1, meins – Die Payment Request API

Der einst von eBay verbreitete Slogan spricht aus, was jeder Kunde, der online einkauft, gerne hätte: Schnell, einfach und sicher nach Lust und Laune shoppen. Doch lagen bisher auf dem Weg vom Klick in den Einkaufswagen bis zur Lieferung an die Haustür umständliche Bestellformulare: Mobil kaum zu bedienen, unzählige Angaben und Zahlungsmethoden mit denen der allgemeine Nutzer gar nichts anfangen kann. Mit der Payment Request API soll das langsam aber sicher eliminiert werden.

Weg von nicht standardisierten Bestellformularen soll der Browser als Mittelsmann zwischen Anbieter und Kunden fungieren, indem dieser autorisiert wird, den Austausch von Zahlungsdaten zu übernehmen. Hierzu werden Zahlungsbetrag sowie akzeptierte Zahlungsmethoden an den Browser des Kunden gesendet, der diese daraufhin mit vorhandenen Zahlungsmethoden des Kunden abgleicht. Sensible Daten werden lediglich zwischen dem Browser des Kunden und den Systemen des Zahlungsdienstleisters ausgetauscht.

Die Vorteile liegen auf der Hand – im wahrsten Sinne des Wortes: Händler, deren Zielgruppe vor allem mobil unterwegs ist, ersparen ihren Kunden viele Klicks und steigern somit die Conversion Rate, denn Abbrüche von Kaufvorgängen aufgrund fehlerhafter Formulare gehören mit der neuen Schnittstelle der Vergangenheit an.

Während die Payment Request API noch in den Kinderschuhen steckt tut der neue HTML 5.2 Standard gut daran, die Zugänglichkeit der Schnittstelle mit immer mehr Bezahldienstleistern zu optimieren. So ist es nun möglich, sogenannte „PaymentRequests“, also Anfragen an den Kunden mit allen relevanten Zahlungsinformationen, von <iframe> Elementen, mit denen häufig die Interfaces eben jener Bezahldienstleister dargestellt werden, zu senden. Mit dem Attribut allowpaymentrequest kann die Payment Request API nun in <iframe> Elementen angesprochen werden.

Freiheit für das DOM

Neben der Beschreibung des W3C, welche HTML-Elemente und Attribute in HTML zulässig sind, unterliegt auch das „Document Object Model“ (DOM) klaren Regeln. Diese schreiben vor, in welchem Kontext Elemente in einem HTML-Dokument vorkommen dürfen, über welche Eltern-Elemente und welche bzw. wie viele Kind-Elemente sie verfügen dürfen. Während sich das Web ständig verändert, bestimmen Design-Trends den Aufbau einer Website. So werden in jedem Standard der W3C auch neue HTML-Konstruktionen erlaubt, andere werden verboten.

Mit HTML 5.2 ist es nun gestattet, <style> Elemente innerhalb des <body> zu platzieren. Werden Styles im HTML-Dokument selbst deklariert, geschah das bisher im Kopfbereich (<head>). Nun können Styles auch dort geschrieben werden, wo sie beispielweise gelten. Zwar mag die Deklaration direkt unterhalb des zu beschreibenden Elements passender aussehen, jedoch kann man schnell den Überblick verlieren und sollte diese Erlaubnis mit Vorsicht genießen (CSS-Stile sind ebenso für vorangegangene Elemente gültig).

Websites sollten leicht zugänglich sein, sowohl in ihrer Performance als auch bei der Informationsvermittlung. One-Pager dienen genau diesem Zweck, ohne einen einzelnen Klick können die gesamten Inhalte einer Website allein durch Scrollen konsumiert werden. Für den einzigartigen Inhalt einer einzelnen Website wurde mit HTML 5 das <main> Element eingeführt, welches nur einmal vorkommen durfte. Stellt man den gesamten Inhalt nun jedoch auf einer Seite dar, würde man mehrere <main> Elemente benötigen. HTML 5.2 erlaubt dies auch, solange nur maximal eines dieser Elemente sichtbar ist, während alle anderen <main> Abschnitte das Attribute hidden zugeschrieben bekommen. Andere Wege, inaktive <main> Elemente mittels CSS auszublenden (z. B. display: none, visibility: hidden) sind nicht gestattet.

Favicons jetzt auch für Apple responsiv

In einem Web für die mobile Welt geht es nicht nur darum, Bilder auf die Maße mobiler Endgeräte zu optimieren, sondern auch Icons nicht zu vernachlässigen. Mit dem <link> Element und dem Beziehungstyp rel=“icon“ lassen sich Favourite Icons, die meist einfach nur Favicon genannt werden, im <head> Bereich eines HTML-Dokuments einbinden. Dieses Icon erscheint dann beispielsweise im Browser-Tab oder etwa auf der Browser-Startseite als letzter Besuch.

Mit dem sizes Attribut konnte bisher die Größe des jeweils angegebenen Icons angegeben werden. Der Browser wählt auf diese Weise anhand des Attributs das für das Endgerät passende Icon aus. Apple’s iOs-Geräte unterstützen sizes leider nicht, weshalb HTML 5.2 dieses Attribut nun auch für die eigens von Apple eingeführte Beziehung „apple-touch-icon“ erlaubt.

Fazit

Mit HTML 5.2 verfolgt das W3C weiterhin seinen Kurs, versionierte HTML-Spezifikationen in festgelegten zeitlichen Intervallen zu veröffentlichen. Die hier genannten Neuerungen sind nur ein Teil aller Änderungen und werden vom W3C im Changelog gelistet. Der neue Standard geht mit der Zeit und erlaubt, das Web im Fokus auf seine Mobilität voranzubringen, denn Ziel des W3C ist: „Dem World Wide Web dadurch seine vollen Möglichkeiten zu erschließen, dass Protokolle und Richtlinien entwickelt werden, die ein langfristiges Wachstum des Web sichern.“