HTML5: Vorteile und Funktionen

14. Februar 2014 von

HTML5 entpuppt sich bei näherem Hinsehen als ein alter Hut. Bereits vor zehn Jahren haben mehrere Browseranbieter den ersten Vorschlag für die Weiterentwicklung der Vorgängerversion HTML 4.01 aus dem Jahre 1999 gemacht. Aber angesichts der komplexen Gemengelage aus widerstreitenden Geschäftsinteressen und Überzeugungen dauert es halt manchmal ein wenig länger, bis sich Innovationen durchsetzen.

Ein Push für HTML5 ist dieser offene Brief einiger großer Publisher. Sie fordern alle Werbetreibenden dazu auf, bei der Kreation ab sofort auf HTML5 zu setzen. Aufhänger ist der Mobile-Boom und damit die Tatsache, dass responsives Design eine immer stärkere Rolle spielt und mit HTML5 leichter realisiert werden kann.

Wir beobachten die Entwicklung seit Langem, haben bereits Webprojekte in HTML5 umgesetzt und fühlen uns daher gut gerüstet. Bei Gesprächen mit Kunden und Partnern tauchen aber auch immer wieder Fragen zum Thema auf. Daher nehmen wir den Aufruf der Publisher zum Anlass, die wichtigsten Veränderungen und die daraus entstehenden Chancen einmal darzustellen.

Funktionen und Vorteile von HTML5

Grundsätzlich ist HTML5 im Vergleich zu HTML 4.01 ein Quantensprung in vielerlei Hinsicht. Grob sind zwei Bereiche besonders hervorzuheben. Zum einen sind neue, mächtige Elemente hinzugekommen, die bisher nicht oder nur mit Adobe Flash möglich waren. Zum anderen ist die Auszeichnung von Elementen auf einer Seite, d.h. die semantische Kennzeichnung von (den Suchmaschinen bekannten) Typen und Funktionen, mit Auswirkungen auf SEO ausgeweitet worden.

Zur ersten Kategorie gehören diese Änderungen:

  • Ein neuartiges Canvas-Objekt erlaubt, hardwarebeschleunigt und damit sehr performant dynamische Grafiken zu zeichnen. Es sind nicht nur «Standardfunktionen» einer Zeichenbibliothek, wie schon aus anderen Systemen wie Android oder Adobe Flash bekannt, sondern auch 3D-Grafiken. Damit erübrigt sich z.B. für Browser-Games der Umweg über Adobe Flash.
  • Die Nutzung von Videos und Audio wird so einfach wie die Verwendung von Bildern. Neben dem Tag <img …> gibt es nun zwei neue Elemente <video …> und <audio …>.
  • Wie jede Android-App besitzt nun auch jede Webseite in HTML5 eine eigene SQLite-Datenbank und kann in diese Daten speichern, lesen und verwalten. Damit lassen sich beliebige, strukturierte Daten, die weit über ein typisches Cookie hinausgehen, lokal speichern. Allerdings hinkt der Vergleich ein wenig, da die SQLite-Datenbank nicht etwa mitgesendet wird und somit nicht wie ein Cookie zur Wiedererkennung eines Besuchers dienen kann. Dieses in HTML5 WebStorage genannte Element erscheint sogar in zwei Varianten, als persistenter lokaler und als Session-gebundener d.h. flüchtiger (bis der Benutzer das Tab schließt) Speicher.
  • Mit Geolocation fragt der Browser den Benutzer nach der Erlaubnis, den Standort des Benutzers abzufragen. Die Standortbestimmung ist aufgrund der technischen Ausstattung bei mobilen Devices in der Regel weitaus genauer als auf Desktopcomputern. Die GPS-Position aus Längen- und Breitengrad lässt sich dann für unterschiedliche Zwecke verwenden, z.B. um aktuelle lokale Informationen und POIs in der Nähe anzuzeigen oder eine Turn-by-Turn-Navigation anzubieten.
  • Das mittlerweile schon recht häufig anzutreffende Verschieben von Elementen per Drag-and-Drop ist ebenfalls Teil von HTML5. Das macht das Hochladen von Bildern sehr einfach, praktisch und nutzerfreundlich: einfach in ein dafür vorgesehenes Feld ziehen, fertig.
  • SVG (Scalable Vector Graphics): Skalierbare Vektor-Grafiken werden durch HTML5 nun endlich zum Standard.
  • Eine für die Performance sinnvolle Erweiterung sind sogenannte Web Workers. Sie erlauben, JavaScript-Code als Hintergrundprozess und damit unabhängig vom Rest der Seite auszuführen. Damit reagiert die Seite schneller und bleibt benutzbar, auch wenn aufwendige Skripte ausgeführt werden. Das ärgerliche „Einfrieren“ einer Website wird verschwinden. Im Zusammenhang mit den anderen neuartigen Elementen wie Datenbanken und 3D-Grafiken eine sehr sinnvolle Neuerung.
  • Server-Sent-Events (SSE) erlauben vom Server abgesandte Updates zu einer Webseite. Dies ging bisher zwar auch, allerdings musste der Client-Browser ständig anfragen, ob Neuigkeiten vorliegen. Mit SSE ist es nun möglich, dass der Server selbstständig neue Daten an die gerade geöffnete Webseite überträgt. Mit diesem Feature in der Hand darf man nun kreativ werden. Denkbar wäre beispielsweise ein Banner, der nicht nur die aktuellsten Börsenkurse anzeigt (gängige Praxis durch Anfrage an ein Backend während des Zusammensetzens des Banners), sondern sich auch laufend aktualisiert, während die Seite geöffnet ist.
  • Als letzte nennenswerte Änderung führt HTML5 viele neue Eingabe-Elemente für Formulare ein, welche auf den jeweiligen Eingabetyp zugeschnitten sind, z.B. Elemente für Farbauswahl (<color>), Datumauswahl (<date>), Zahlen (<number>), URLs (<url>), E-Mail-Eingabe (<email>), Telefonnummern (<tel>), Uhrzeit (<time>), Woche (<week>), Monat (<month>), ein Schieberegler (<range>) und ein speziell für eine Websuche eingeführtes Feld (<search>). Hinzu kommen neue Formularelemente, z.B. für die Auswahl der Verschlüsselungsstärke beim Absenden des Formulars (<keygen>) oder viele neue Attribute für Formulare wie autocomplete für die automatische Vervollständigung der Eingabe, autofocus für ein standardmäßig ausgewähltes Eingabefeld beim Laden der Seite, required zum Definition der unbedingt notwendigen Felder u.v.m.

Zur zweiten Kategorie veränderter Elemente gehören einige neueingeführte Tags, die zur semantischen Definition einzelner Bereiche der Webseite dienen können. Bisher mit Einfluss auf SEO eingesetzte Tags waren meist nur h1-h6 Überschriften und Aufzählungslisten für die Navigation. Nun kommen einige spezielle Elemente hinzu, die Suchmaschinen die Bedeutung des Inhalts im Inneren eines Elementes mitteilen. Dazu gehören Strukturelemente wie

  • <header> für den Kopfbereich einer Seite
  • <nav> für den Navigationsbereich
  • <section> für einen Abschnitt
  • <main> für den Hauptbereich
  • <article> für Blogsposts oder Artikel in einem Dokument
  • <aside> für eine Seitenleiste
  • <details> für das Ein- und Ausblenden von zusätzlichen Informationen
  • <summary> für einen Teaser oder eine Zusammenfassung eines <details> Bereichs
  • <figure> für Inhalte wie Bilder, Diagramme und Codeblöcke
  • <footer> für die Fußleiste

ebenso wie Inhalts- und Designelemente, darunter

  • <mark> für das gelbe Markieren von Text, bekannt aus PDFs
  • <command> für klickbare Kommandobuttons
  • <progress> für Fortschrittsanzeigen

Kurz und gut: HTML5 macht mehr möglich. Das Web wird schneller und für die wachsende Zahl der Endgeräte besser verfügbar. Daher ist HMTL5 ein großer Schritt in die richtige Richtung.

Weiterlesen

Google EMEA Product Kickoff 2024: Ein umfassender Überblick für Marketingspezialisten

19. März 2024

Beim Google EMEA Product Kickoff vom 19. März 2024 in London wurden zahlreiche Updates und Neuerungen vorgestellt, die für Marketingspezialisten und Unternehmen von grossem Interesse sind. Als Agentur möchten wir…

Weiterlesen
Weiterlesen

Google Consent Mode v2: Eine neue Ära der Dateneinwilligung beginnt

16. Januar 2024

Die digitale Marketinglandschaft im Wandel Der Schutz der persönlichen Daten im Internet ist ein Kernthema der letzten Jahre, nicht nur im digitalen Marketing. Kontinuierlich arbeitet die EU an Lösungen, um…

Weiterlesen
Weiterlesen

Schweizer Mediennutzung 2023: Ein Blick auf die aktuellen Trends

02. Oktober 2023

Die jüngsten Ergebnisse der Digimonitor-Studie 2023, durchgeführt von der Interessengemeinschaft elektronische Medien (IGEM) und der WEMF AG für Werbemedienforschung, zeigen signifikante Veränderungen in der Schweizer Mediennutzung. Wir werfen einen prägnanten…

Weiterlesen
Weiterlesen

Server Side Tracking: Welcher Anbieter ist der Richtige für mein Projekt?

19. Juli 2023

Dieser Blog-Artikel fasst die Informationen aus unserem «White Paper – Welcher Anbieter ist der Richtige für mein Projekt?» zusammen. Für mehr Details laden Sie sich gerne dieses herunter. Inhalt Was…

Weiterlesen

Folgen Sie uns