Was bietet HTML 5.1 an Neuerungen?

Ohne HTML („Hypertext Markup Language“, zu Deutsch Hypertext-Auszeichnungssprache) wäre das Internet ein anderes: Die Auszeichnungssprache strukturiert Texte, Bilder oder Links und bildet damit die Grundlage des World Wide Webs. Allerdings hat sich das Web mit der Zeit verändert. Multimedia ist zu einem wichtigen Faktor für Webdesigner geworden. Audio- und Video-Inhalte sowie eine mobile Darstellbarkeit der Inhalte gewinnen immer stärker an Bedeutung.

Um den veränderten Ansprüchen von Webdesignern und Nutzern gleichermaßen gerecht zu werden, wurde die Auszeichnungssprache HTML von dem World Wide Web Consortium (W3C) und der Web Hypertext Application Technology Working Group (WHATWG) nach vielen Jahren des Stillstands weiterentwickelt. Seit Herbst 2014 gibt es daher ein neues HTML: Mit HTML5 lassen sich viele Inhalte leichter einbinden. Zahlreiche Umwege und Plug-ins sind somit obsolet geworden. Jetzt ist mit HTML 5.1 gleich das nächste kleine Update fertig. Doch wie läuft eigentlich das Prozedere ab, bis ein neues HTML veröffentlicht wird? Und was sind die wichtigsten Neuerungen des aktuellen Updates? Und welche Features werden voraussichtlich nicht ohne weiteres zum neuen Standard erhoben, und was genau bedeutet das für Websitebetreiber?

Das letzte Mal hat es rund 15 Jahre gedauert, bis nach Version 4.01 endlich ein neues HTML eingeführt wurde. Dieses Mal kam das Update deutlich schneller. Knapp zwei Jahre nach HTML5 folgt jetzt die erste Anpassung mit HTML 5.1. Damit wird seitens W3C und WHATWG dem zuvor sehr langen Update-Intervall entgegengearbeitet. In Zeiten einer beschleunigten Entwicklung des WWW ist das eine ebenso logische wie wichtige Konsequenz. Für das Update wurden zunächst erste Entwürfe („Working Drafts“) in Arbeitsgruppen erarbeitet und die programmierten HTML-Features in Form einer Kandidatenliste nominiert („Candidate Recommendation“). Im Rahmen einer ausführlichen Testphase soll die Umsetzbarkeit dieser Elemente erprobt werden. Ist die Testphase beendet, kommt es zur Veröffentlichung einer offiziellen Empfehlung des Standards („Recommendation“). Im Fall von HTML 5.1 geschieht dieser Prozess auch in einem engen Dialog mit der Community: So hat das W3C die Entwicklung des neuen HTMLs auf GitHub veröffentlicht. Die Gemeinschaft hat damit mehr denn je die Möglichkeit, sich vorab intensiv mit dem neuen Standard vertraut zu machen und Feedback auf einfache Weise abzugeben. GitHub ist ein Versionsverwaltungsdienst für Software-Projekte. Zahlreiche Open-Source-Projekte sind dort zu finden. Auf diese Weise können die Arbeiten zahlreicher Entwickler an einer frei zugänglichen Software automatisiert zusammengeführt werden – so auch im Fall von HTML 5.1.

Neu ist an HTML 5.1 einiges – das meiste wird bereits von allen gängigen Browsern unterstützt. Ins Zentrum der Neuerungen rückt abermals die Anpassung multimedialer Inhalte im responsiven Webdesign. Problematisch war bisher vor allem die Darstellung unterschiedlicher Bilder bei wechselnder Auflösung. Zu diesen Zwecken sollte bereits mit HTML5 der <picture>-Container zum Standard werden – daraus wurde damals aus Zeitgründen nichts. Allerdings nutzen Webentwickler  das Element dennoch – ungeachtet dessen, dass es nicht im Zuge der Einführung von HTML5 zum offiziellen Standard erhoben worden war. Mittlerweile verstehen alle üblichen Browser das <picture>-Element: Die Standardisierung mit dem neuen HTML macht es jetzt auch offiziell.

Beim <picture>-Element handelt es sich um einen Container: Über unterschiedliche Source-Elemente können Bilddateien eingebunden werden. Dadurch werden jeweils nur die für Bildschirmgröße und -auflösung passenden Bildquellen geladen, was Übertragungszeiten spart und der mobilen Gestaltung einer Website zugutekommt. Breitbandschonend können so für hochauflösende Displays auch alternative Inhalte bereitgestellt werden. Allerdings ist dafür noch das ebenfalls mit HTML 5.1 eingeführte Attribut <srcset> notwendig: Es setzt die Bilder und die verschiedenen Größen in Beziehung zueinander. Die Website SelfHTML hat in dem folgenden Beispiel dargestellt, wie die fertige Einbindung inklusive Fallback mit <img> am Ende aussehen kann:

<picture>

<source media="(min-width: 1024px)" srcset="https://www.ionos.de/digitalguide/feuerwehr-1600.jpg">

<source media="(min-width: 480px)" srcset="https://www.ionos.de/digitalguide/feuerwehr-480.jpg">

<!---Fallback---> <img src="https://www.ionos.de/digitalguide/feuerwehr-480.jpg" srcset="https://www.ionos.de/digitalguide/feuerwehr-320.jpg" alt="Feuerwehrfest 2014">

</picture>

 Das <picture>-Element und <srcset> gehen gewissermaßen Hand in Hand. Auch wenn die neuesten und gängigsten Browser-Versionen beides bereits unterstützen: Für veraltete Browser wird zusätzlich mit dem Fallback sichergestellt, dass die Grafik immer korrekt angezeigt wird. Innerhalb der Source-Elemente werden schließlich die Anforderungen an Bildschirmeigenschaften wie Breite und Pixeldichte definiert. 

Da für eine Empfehlung durch das W3C ein neues HTML-Feature von mindestens zwei unabhängigen Browsern im Zeitraum der Testphase implementiert worden sein muss, stehen einige Empfehlungskandidaten auf der Kippe. Diese werden zum Zeitpunkt ihrer Nominierung für eine Empfehlung als „at risk“ (dt. „in Gefahr“) gekennzeichnet, da sie noch nicht in dem für eine Standardisierung notwendigen Maße von Browsern und/oder Entwicklern angenommen worden sind.

Da für eine Empfehlung durch das W3C ein neues HTML-Feature von mindestens zwei unabhängigen Browsern im Zeitraum der Testphase implementiert worden sein muss, stehen einige Empfehlungskandidaten auf der Kippe. Diese werden zum Zeitpunkt ihrer Nominierung für eine Empfehlung als „at risk“ (dt. „in Gefahr“) gekennzeichnet, da sie noch nicht in dem für eine Standardisierung notwendigen Maße von Browsern und/oder Entwicklern angenommen worden sind.

Weniger verbreitet als das <picture>-Element ist beispielsweise das <dialog>-Tag: Dieses wird zum derzeitigen Stand erst von Browsern auf Chromium-Grundlage wie Chrome und Opera unterstützt. Daher gingen die Meldungen kurz vor der HTML-5.1-Veröffentlichung auseinander: In einigen Artikeln wurde von einer Standardisierung berichtet, auf der offiziellen Seite des W3C heißt es hingegen, dass das <dialog>-Element wieder entfernt worden sei. Mit diesem sollte eigentlich die Einbindung von Pop-up-Fenstern beziehungsweise Dialog-Fenstern leichter von der Hand gehen. Denn normalerweise ist dafür mehr JavaScript-Code notwendig. Schwierigkeiten bereitete zuvor vor allem das Öffnen und Schließen. Browser, die <dialog> (noch) nicht unterstützen, können das Fenster zwar anzeigen, allerdings nicht zuklappen. Innerhalb des <dialog>-Elements ist nahezu jeglicher Inhalt umsetzbar – von reinem Text über Formulare bis zu Bildern.

Neben dem <dialog>-Element standen auch <keygen> und <menu> auf der At-risk-Abschussliste für das neue HTML. Die zwei letztgenannten wurden jedoch nach Angaben des W3C „beibehalten“. Zu diesen gehören auch <menuitem> und das „contextmenu“-Attribut. Mit den Elementen und Attributen lassen sich Toolbars und Kontextmenüs erstellen, wie man sie etwa aus Desktop-Applikationen kennt. Tatsächlich gestrichen wurde hingegen der Toolbar-Type für das <menu>-Element.

Ein ebenso wechselhaftes Schicksal teilt auch das <keygen>-Element: Der Generator für kryptografische Schlüsselpaare wurde ursprünglich von Mozilla entwickelt. Microsoft hatte kein Interesse an einer Implementierung, Google stellte gar im Juli 2015 einen Antrag auf Entfernung aus dem Standard. So war das At-risk-Brandmal wenig verwunderlich. Die vom W3C vorgeschlagene Empfehlung für HTML 5.1 von September 2016 behielt das Element dennoch vorläufig bei. Allerdings mit dem Verweis, dass es sich noch im „Prozess des Entfernens“ befindet, der viele Jahre dauern wird. Damit wird es über kurz oder lang trotzdem aus dem Standard fliegen. Das Verwenden des Elements wird nicht empfohlen.

Websitebetreiber können die empfohlenen Elemente und Attribute des neuen HTML ohne weiteres einsetzen. Wie eingangs geschildert, machen das viele ohnehin bereits. Die At-risk-Liste und die Streichungen sind neben den offiziellen Standardisierungen ebenso einen näheren Blick wert: Hat man die auf der At-risk-Liste genannten Elemente und Attribute bisher verwendet, sollte man darüber nachdenken, sein Webprojekt anders umzusetzen. Eine hohe Kompatibilität zu möglichst vielen Browsern und Endgeräten sollte schließlich das Ziel jedes Website-Betreibers sein – heute mehr denn je.

Auch in Zukunft lohnt es sich für Webmaster, stets einen Blick auf die offizielle Seite des W3C zu werfen: Im Zuge der Fertigstellung von HTML 5.1 wurde sogleich mit Version 5.2 der Nachfolger in Aussicht gestellt. Ein erster Entwurf für die entsprechenden Änderungen liegt bereits vor. Damit scheint sich mit dem neuen HTML der Update-Rhythmus deutlich zu beschleunigen. Für Websitebetreiber bedeutet dies, dass schneller auf Bugs reagiert werden kann und schneller eine Anpassung an sich verändernde Anforderungen stattfindet. Durch die HTML-5.1-Veröffentlichung über GitHub besteht zudem die Möglichkeit, als Entwickler selbst aktiv an dem Verbesserungsprozess teilzuhaben.