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.

KATEGORIEN

Blog

SCHLAGWÖRTER

Weiterlesen

Customer Relationship Management (CRM) – erst die Strategie, dann das System

02. September 2019

CRM-Systeme dienen der effizienten Steuerung und stetigen Optimierung der Kundenbeziehung. Echte Kundenzentrierung braucht aber mehr als ein Werkzeug.

Weiterlesen
Weiterlesen

Customer Centricity – Teil III: Ihr Weg in ein neues Kundenmanagement

05. Februar 2019

In Teil 1 und Teil 2 dieser Blogreihe haben wir festgestellt, dass Customer Centricity nichts anderes als eine Unternehmensphilosophie ist und nur Schritt für Schritt in reale Strukturen übersetzt werden…

Weiterlesen
Weiterlesen

Customer Centricity – Teil II: Mit Realismus zum Ziel

29. Januar 2019

Bereits im ersten Teil dieser Blogserie zum Thema Customer Centricity haben wir festgestellt, dass sich entsprechende Lösungen weder herbeizaubern noch einkaufen lassen. Denn Customer Centricity ist kein „Ding“, sondern in…

Weiterlesen
Weiterlesen

Customer Centricity – Teil I: Raus aus dem Buzzword-Labyrinth!

21. Januar 2019

„Customer Centricity“ ist in Gesprächen zwischen Unternehmern, Marketern und Beratern mittlerweile ebenso geläufig wie betriebswirtschaftliche Klassiker wie „Umsatz“ und „Einkauf“. Für diese Feststellung muss man einfach nur die Augen öffnen.…

Weiterlesen

Folgen Sie uns

Newsletter Anmeldung hier

Kontaktformular öffnen


adisfaction GmbH verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur dazu Ihnen die von Ihnen explizit gewünschten Informationen zur Verfügung zu stellen. Mit dem Absenden Ihrer Anfrage erklären Sie sich mit der Verarbeitung Ihrer angegebenen Daten zum Zweck der Bearbeitung Ihrer Anfrage gem. §13f DSGVO im Rahmen unserer Datenschutzerklärung einverstanden.