HTML5: WTF ist das?

Als Steve Jobs sich weigerte, Flash auf iOS-Geräten zuzulassen, behauptete er, dass HTML5 alles kann, was Flash kann.

Er war nicht ganz ehrlich – das Feld der Realitätsverzerrung war damals sehr stark -, aber am Ende hat Apple gewonnen und Adobe nicht; HTML5, nicht Flash, ist die Technologie, die das Web verändern wird. Was ist sie also, und was will sie von uns?

Was ist HTML5?

HTML5 ist die neueste Version der Hypertext Markup Language, des Codes, der Webseiten beschreibt. Es handelt sich dabei um drei Arten von Code: HTML, das die Struktur liefert, Cascading Style Sheets (CSS), die für die Darstellung sorgen, und JavaScript, das die Dinge in Gang setzt.

Was ist so toll an HTML5?

HTML5 wurde entwickelt, um fast alles zu ermöglichen, was man im Internet tun möchte, ohne dass zusätzliche Software wie Browser-Plug-ins erforderlich ist. Es eignet sich für alles, von Animationen bis zu Anwendungen, von Musik bis zu Filmen, und kann auch zum Erstellen unglaublich komplexer Anwendungen verwendet werden, die in Ihrem Browser laufen.

Es gibt noch mehr. HTML5 ist nicht urheberrechtlich geschützt, so dass Sie für seine Verwendung keine Lizenzgebühren zahlen müssen. Außerdem ist es plattformübergreifend, d. h. es spielt keine Rolle, ob Sie ein Tablet oder ein Smartphone, ein Netbook oder einen Laptop, ein Ultrabook oder einen Smart TV verwenden: Wenn Ihr Browser HTML5 unterstützt, sollte es perfekt funktionieren. Natürlich ist es ein bisschen komplizierter als das. Mehr dazu in Kürze.

Was kann HTML5?

Wir haben einen langen Weg zurückgelegt, seit HTML kaum ein einfaches Seitenlayout bewältigen konnte. Mit HTML5 können Sie Webanwendungen schreiben, die auch dann funktionieren, wenn Sie nicht mit dem Netz verbunden sind. Sie können Websites mitteilen, wo Sie sich befinden, hochauflösende Videos verarbeiten und außergewöhnliche Grafiken liefern.

Benötige ich einen HTML5-Browser?

Sehr wahrscheinlich haben Sie bereits einen. Alle namhaften Browser – Internet Explorer, Edge, Firefox, Chrome, Safari und Opera, Mobile Safari und der Android-Browser – unterstützen HTML5, aber sie tun nicht alle dasselbe.

„Firefox unterstützt im Allgemeinen die meisten HTML5-Funktionen, gefolgt von Chrome und Safari, aber wie wir bereits gesagt haben, ist HTML5 ein sich entwickelnder Standard und die neuesten Versionen der einzelnen Browser decken mehr als nur die Grundlagen ab. Wenn Sie genauere Informationen zur Browserunterstützung wünschen, finden Sie auf der ausgezeichneten Website Caniuse.com eine detaillierte Aufschlüsselung der unterstützten Browser.

Was ist das Problem mit HTML5-Video?

Der HTML5-Standard unterstützt Video, aber leider konnte man sich nicht darauf einigen, welche(s) Format(e) unterstützt werden soll(en) – und das bedeutet, dass verschiedene Browser verschiedene HTML5-Videoformate unterstützen.

Es gibt drei Haupttypen: Ogg Theora, das von jeder Browserleiste im Internet Explorer unterstützt wird (Safari-Unterstützung erfordert eine manuelle Installation); H. 264, das von allen außer Firefox unterstützt wird; und VP8/WebM, das von allen unterstützt wird (obwohl Safari und IE eine manuelle Installation erfordern).

Wird HTML5 Flash und Silverlight ersetzen?

In gewisser Weise ist das bereits der Fall: iOS-Geräte laufen nicht mit Flash, und viele Video-Websites sind von Flash auf HTML5-Video umgestiegen oder bieten zumindest HTML5 als Option an. Da HTML5 jedoch keine DRM-Technologie (Digital Rights Management) zum Schutz vor Kopien enthält, bevorzugen viele Inhaltseigentümer proprietäre, DRM-freundliche Formate wie Flash oder Silverlight. Die britische Video-Website LoveFilm zum Beispiel verzichtet auf Flash und wechselt stattdessen zu Silverlight und HTML5.

Obwohl Adobe angekündigt hat, die Entwicklung von Flash Player für mobile Geräte einzustellen, wird Flash nicht nur für die Anzeige von Videos verwendet, sondern auch für viele andere Zwecke, so dass es nicht verschwinden wird.

Welche Tools brauche ich, um HTML5-Websites zu erstellen?

Puristen würden sagen, dass man keine Tools braucht – man kann HTML5-Code mit einem Kugelschreiber und etwas Papier schreiben, wenn man will -, aber andere wollen Tools wie Adobe Dreamweaver, das 2010 das HTML5-Paket erhielt.

„Adobe bietet auch Readying Edge an, ein spezielles HTML5-Animationswerkzeug, das die Erstellung von Animationen im Flash-Stil erleichtern soll.“

Warum HTML5?

HTML5 bietet viele Vorteile gegenüber früheren HTML-Versionen, von denen wir einige bereits kurz erwähnt haben. Schauen wir uns einige der Gründe an, warum HTML5 so besonders ist.

• Es ist mit allen Browsern kompatibel.
  HTML5 wird von allen wichtigen Browsern unterstützt, darunter Chrome, Firefox, Safari, Opera sowie iOS für Chrome und Safari und Android-Browser. Es kann sogar mit älteren und weniger verbreiteten Browsern wie dem Internet Explorer arbeiten. Wenn Sie also mit HTML5 arbeiten, können Sie sicher sein, dass die Nutzer Ihre Website einheitlich nutzen können, unabhängig davon, welchen Browser sie verwenden, ob es sich um ein Handy oder einen Desktop handelt.
• Es ermöglicht das Offline-Surfen.
  Mit HTML5 können Sie Offline-Anwendungen entwickeln. Browser, die HTML5-Offline-Apps unterstützen (und das sind die meisten), laden HTML, CSS, JavaScript, Bilder und andere Ressourcen, aus denen die App besteht, herunter und hosten sie lokal. Wenn ein Benutzer dann versucht, ohne Netzverbindung auf die Webanwendung zuzugreifen, stellt der Browser lokale Kopien zur Verfügung. Das bedeutet, dass Sie sich keine Sorgen machen müssen, dass Ihre Website nicht geladen wird, wenn die Internetverbindung unterbrochen wird oder der Nutzer keine aktive Verbindung hat. Sehr nützlich ist dies bei sog. Progressive Web Apps, die damit auch offline funktionieren
• Es hat eine sauberere Code-Struktur.
  Mit den neuen semantischen Elementen von HTML5 können Sie saubereren und anschaulicheren Code erstellen. Vor HTML5 mussten Entwickler viele generische Elemente wie divs verwenden und sie mit CSS so gestalten, dass sie als Überschriften oder Navigationsmenüs erscheinen. Das Ergebnis? Viele Divs und Klassennamen, die die Lesbarkeit des Codes erschweren. Mit HTML5 können Sie einen semantisch sinnvolleren Code schreiben, der es Ihnen und anderen Lesern ermöglicht, zwischen Stil und Inhalt zu unterscheiden.
• Es ist leichter zugänglich.
  Dank der neuen semantischen Elemente von HTML5 können Sie außerdem Websites und Anwendungen erstellen, die besser zugänglich sind. Vor diesen Elementen konnten Bildschirmlesegeräte nicht erkennen, dass ein div mit einer Klasse oder ID namens „header“ tatsächlich eine Kopfzeile ist. Mit und anderen semantischen HTML5-Tags können Screenreader eine HTML-Datei besser analysieren und Nutzern, die darauf angewiesen sind, ein besseres Erlebnis bieten.

Was ist neu in HTML5?

Bei der Entwicklung von HTML5 wurden wichtige Ziele verfolgt, unter anderem:

• Code für Benutzer und Bildschirmleser leichter lesbar machen
• Verringerung der Überschneidungen zwischen HTML, CSS und JavaScript
• Förderung der Reaktionsfähigkeit und Konsistenz des Designs in verschiedenen Browsern
• Multimedia-Unterstützung ohne Flash oder andere Plug-Ins
• Jedes dieser Ziele hat die Änderungen in dieser neuen Version von HTML beeinflusst. Im Folgenden wollen wir uns auf sieben dieser Änderungen konzentrieren.

Neue semantische Elemente

Mit HTML5 wurden mehrere neue, semantisch sinnvolle Tags eingeführt. Dazu gehören <section>, <header>, <footer>, <nav>, <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, <meter> und <main>. Dies macht es einfacher, sauberen Code zu schreiben, der den Stil klar vom Inhalt abgrenzt, was besonders für Benutzer mit unterstützenden Technologien wie Screenreadern wichtig ist.

Inline SVG

Bei der Verwendung von HTML4 benötigen Sie Flash, Silverlight oder eine andere Technologie, um skalierbare Vektorgrafiken (SVGs) zu Ihren Webseiten hinzuzufügen. Mit HTML5 können Sie mit dem -Tag Vektorgrafiken direkt in HTML-Dokumente einfügen. Sie können mit diesem neuen Element auch Rechtecke, Kreise, Text und andere Vektorpfade und -formen zeichnen. Nachfolgend sehen Sie ein Beispiel für eine Kreisform, die mit dem SVG-Element erstellt wurde.

Form-Eigenschaften

Dank der erweiterten Formoptionen von HTML5 können Sie intelligentere Formen erstellen.

WebM-Bildformat

Vor HTML5 brauchte man Browser-Plug-ins, um Audio- und Videoinhalte in Webseiten einzubetten.

Platzhalter-Attribut

Mit HTML5 wurde das Platzhalter-Attribut eingeführt. Dies kann zusammen mit dem
<input>-Element verwendet werden, um den Benutzern beim Ausfüllen von Passwörtern oder anderen Dateneingabefeldern einen kurzen Hinweis zu geben. Dies kann Ihnen helfen, bessere Formulare zu erstellen. Es ist jedoch zu beachten, dass dieses Attribut nicht für unterstützende Technologien verfügbar ist. Lesen Sie mehr über die Probleme mit dem Platzhalter-Attribut.

Vom Server gesendete Ereignisse

Ein vom Server gesendetes Ereignis liegt vor, wenn eine Webseite automatisch aktualisierte Daten von einem Server erhält. Dies war mit HTML4 möglich, aber die Webseite sollte nach

HTML5 unterstützt einseitige, vom Server gesendete Ereignisse. Das bedeutet, dass ständig Daten vom Server an den Browser gesendet werden. Stellen Sie sich vor, wie nützlich dies wäre, wenn Ihre Website Aktienkurse, Nachrichten-Feeds, Twitter-Feeds usw. enthalten würde. Vom Server gesendete Ereignisse wurden in der vorherigen HTML-Version unterstützt, aber die Webseite musste neu angefordert werden.

Lokaler Webspeicher

Bei der vorherigen Version von HTML werden die Daten lokal über Cookies gespeichert. Bei HTML5 wird aufgrund der Skripting-API anstelle von Cookies ein Webspeicher verwendet. Dies ermöglicht die lokale Speicherung von Daten, z. B. von Cookies, aber in viel größeren Mengen.

Nachdem wir nun wissen, was HTML5 Neues zu bieten hat, wollen wir uns ansehen, warum Sie es auf Ihrer Website verwenden sollten.

HTML5 ist die Zukunft des World Wide Web

Mit seinen neuen semantischen Elementen, erweiterten Formularoptionen, formatunabhängiger Bildauszeichnung und mehr revolutioniert HTML5 die Art und Weise, wie Entwickler Webseiten erstellen. Dies wiederum verändert das Online-Erlebnis der Nutzer. Wir können jetzt Videos ansehen, ohne Flash aktualisieren oder andere Software herunterladen zu müssen. Wir können Apps nutzen, wenn wir keine Internetverbindung haben. Wir können auf einer Website das gleiche großartige Erlebnis haben, egal ob wir ein Telefon, ein Tablet oder einen Smart TV benutzen – und mehr.