Zurück zum Anfang

HTML5 ist der Standard zur Auszeichnung von Webdokumenten. Dabei schwirren viele Behauptungen mit diesem Thema mit. Die Rede ist von besserer Performance, neuen Elementen, die der Webseite nicht nur eine bessere Struktur verleihen, sondern auch in Punkto SEO bevorzugt werden. Aber was macht HTML5 so viel besser als seine Vorgängerversionen?

Der wichtigste Unterschied sollte hier zuerst genannt werden: Anders als die Vorgängerversionen wurde HTML5 nicht von dem W3C entwickelt, sondern von der WHATWG. Diese Gruppe ist ein Zusammenschluss mehrerer großer Browserhersteller, die einen neuen Standard und keine Weiterentwicklung von HTML schaffen wollten. Dazu ausführlicher in der Geschichte von HTML5.

Der wesentliche Punkt dabei ist, dass HTML5 nun wieder vielmehr das ist, was es einst sein sollte. Ursprünglich war eine Auszeichnungssprache geplant, mit der man ein Webdokument semantisch treffend beschreiben konnte. Ein Paragraphen-Element war für einen Absatz geeignet und ein Headline-Element war für eine Überschrift gedacht. Durch das gesamte Wirrwar der Weiterentwicklung, dem Browserkrieg samt der Verbindung mit XML verlor sich dieser Gedanke. Keine klaren Regeln und keine Aussicht auf eine fortschrittliche Zukunft für HTML.

HTML5 schafft genau das: Einen großen Schritt in Richtung moderner Technologien (3D-Grafik im Web, einfache Einbindung von Audio und Video und vieles mehr...), die Möglichkeit jeden Bereich einer Webseite wieder treffend auszuzeichnen, sowie strikte Definitionen, die jeder nachschlagen kann.

Neue Attribut-Syntax

Da es in HTML Elemente und Attribute gibt, soll hier noch ein Wort zu Attributen bei HTML5 verloren werden:

Trotz des strikten Regelwerks trifft man bei HTML5 immer wieder auf eine große Toleranz. Bei Attributen werden diesbezüglich gleich vier verschiedene Varianten akzeptiert:

BeschreibungBeispiel
Leere Attribute<input type="text" value="John" disabled>
Ohne Anführungszeichen<input type="text" value=John>
Mit Anführungszeichen<input type="text" value="John Doe">
Mit Apostroph<input type="text" value='John Doe'>

Neue semantischen Elemente

Der neue Standard bietet eine Vielzahl an semantischen Elementen. Heutzutage findet man auf beinahe jeder Webseite einen Header mit einer Navigationsleiste, einem Logo oder einem Suchbutton. Dazu einen Footer mit einer Sitemap oder Verweisen zum Impressum oder Datenschutzerklärungen. Diese ganzen inoffiziellen Standards einer Webseite wurden früher mithilfe von <div></div> Containern realisiert. Da ein universelles Containerelement ohne ein ID-Attribut wie id="header" sicherlich nichts aussagend ist, wurden in HTML5 Elemente, wie <header></header>, <footer></footer> oder <nav></nav> eingeleitet.

Da jede Webseite - egal wie - immer in Bereiche und Unterbereiche eingeteilt ist, wurden ebenfalls Elemente, wie <section></section> oder <article></article> eingebaut, die sogar zusammen mit den vorher erwähnten Elementen <header></header> und <footer></footer> genutzt werden können. Somit gibt es zum Thema Semantik kaum einen Bereich auf einer Webseite, der nicht treffend ausgezeichnet werden kann.

Neue Technologien

HTML5 kommt mit einem gewaltigen Paket an neuen Technologien, die nun ein fester Bestandteil der Sprache selbst geworden sind. Darunter zählen unter anderem die Elemente <canvas></canvas>, <video></video> und <audio></audio>, für die man in früheren HTML Versionen oftmals ein Browser-Plugin brauchte.

Weiterhin haben wir eine gute Verbesserung der Datenspeicherung mit dem "Local Storage". Eine Datenbank, die nun wesentlich mehr Inhalt als die zuvor bekannten "Cookies" speichern kann und via Javascript mit Schlüssel-Werte-Paaren auf einfachste Weise gelesen und geschrieben werden kann.

Ebenfalls sollten die neuen Formelemente erwähnt werden, die nun die alten (meist mit Javascript generierten) Formfelder ablösen und durch die native Implementierung der Browser auch überall unterstützt werden sollte. Zudem sind diese Techniken oftmals schneller als ihre Javascript Vorgänger, da die Ausführung von Javascript gespart und somit eventuelle Fehler vermieden und die Performance gesteigert werden kann.