HTML5 Features

HTML5 benutzt zur Definition die DOM (wie z.B. Javascript)
Bessere Strukturierung der Inhalte (Barrierefreies Design, SEO)
Fehlerbehandlung im HTML-Dokument
Stark vereinfachte DOCTYPEN und CHARSETS
menu und command Elemente
Definiton der Browsernavigation, verbessertes History Verhalten
Sandbox für iframes
Dynamische, interaktive Grafiken mittels canvas
contentEditable und UndoManager Feature
Drag & Drop sowie Copy & Paste Architektur
SVG und MathML Elemente werden im Dokument integriert
Cross-Document-Messaging Feature (postMessage API)
Neue Methode URLs zu definieren

HTML5 goes Multimedia

Neben einigen neuen strukturierenden Elementen wie article, aside, dialog, figure, footer, header, nav und section findet man neue und umfangreiche Elemente, um Daten wie beispielsweise Videos oder Audio auf einer Webseite darzustellen. HTML5 ist mehr als ein Update, es geht ans Eingemachte, neben neuen Elementen und Attributen gibt es auch eine Vielzahl von Um- und Neudefinitionen bekannter Elemente bzw. Attribute.

Unterschiede zu HTML 4.01

Bei der Umstellung von HTML4 auf HTML5 gilt es die Besonderheiten einzelner Elemente zu beachten, die zur Zeit noch häufig genutzt werden, beispielsweise das Border Attribut in einem Image-Tag, das Name Attribut (Anker) in einem A-Element oder das Summary Attribut für einen Table sollten nicht mehr verwendet werden.

Einige Elemente dürfen gar nicht mehr genutzt werden: applet, acronym, bgsound, dir, frame, frameset, isindex, noframes, listing, basefont, big, blink, center, font, marquee, nobr, s, spacer, strike, tt, u, wbr.

Da grundsätzlich alle Formatierungen über CSS erfolgen sollen, fallen dann auch populäre Elemente wie font oder u für Underline weg. Das betrifft auch eine Vielzahl von Attributen, die zwar grundsätzlich nicht wegfallen, aber in Kombination mit bestimmten Elementen nicht mehr genutzt werden dürfen. Die meisten aglin, color, size, width, hspace, vspace und margin Attribute in Verbindung mit body, table, iframe, img, etc. sind nicht mehr zulässig. Auch Frames sind (hoffentlich) tot, grundsätzlich sollte man CSS oder iframes nutzen.

Fehlende Browser-Unterstützung

Obwohl HTML5 bisher nur sporadisch von einigen Browsern unterstützt wird und auch hier nicht jeder Browser alle Features nutzen kann, macht es Sinn, sich bereits jetzt über die Möglichkeiten sowie Vor- und Nachteile von HTML5 zu informieren. Spätestens wenn alle populären Browser HTML5 nicht nur im Ansatz unterstützen, können die HTML5 Features (hoffentlich) voll genutzt werden.

Diese Seite ist HTML5 Valid

Jedenfalls zur Zeit nach dem derzeitigen W3C Validation Service (Mit Ausnahme des Werbeblocks von Affili.net). Da diese Seite in erster Linie für Entwickler interessant ist, wurden für die meisten HTML5 und CSS bzw. Webkit Effekte kein Fallback eingebaut, d.h. einige stylische Besonderheiten werden beispielsweise mit dem Internet Explorer nicht angezeigt - noch nicht!

(Neue) Elemente zur Datendarstellung

audio, video: Ermöglicht das Einbinden von Audio und Videodateien, HTML5 stellt verschiedene Schnittstellen bereit, um beispielsweise die Wiedergabe von Audio/Video steuern zu können. YouTube geht hier in die Offensive und hat bereits Ende 2009 die Beta-Version eines Videoplayers auf HTML5-Basis veröffentlicht, hier kann man die Beta HTML5-Ausgabe für YouTube aktivieren, sofern der eigene Browser diese Technik schon unterstützt.

Videos mit integrierten Werbebotschaften werden noch nicht unterstützt, aber das Projekt ist auch noch als "opt-in experiment" ausgewiesen und wird ständig verbessert. Mit einem Update Ende Januar 2010 wurde nun endlich auch der Vollbildmodus integriert.

embed: Ermöglicht das Einbinden von interaktiven Inhalten und Anwendungen.

mark: Mit diesem Element kann Text besonders hervorgehoben werden, vergleichbar mit einer Textmarker-Funktion.

meter: Mit diesem Element kann angezeigt werden, wie sich ein Wert zu einem einem Maximumwert verhält. Beispiel folgt.

source: Mit diesem Element können für Medien verschiedene Quellen angegeben werden, aus denen der Browser dann die passende auswählt.

time: Mit dem time-Element können feste Zeitangaben im Dokument integriert werden, die vom Browser erkannt und ausgelesen werden können.

HTML5 Anwendungselemente

canvas: Das canvas-Element erzeugt eine Zeichenoberfläche, auf der mit Hilfe von DOM-Methoden gezeichnet werden kann. Viele traditionell in Flash erstellte Objekte wie Werbebanner oder gar flüssig animierte Browserspiele können nun auch direkt in HTML5 erstellt werden, sogar mit 3D Animationen. Canvas ist vielleicht das Element mit dem meisten Potential für neue Entwicklungen - alleine schon durch die relative einfache Steuerung per Javascript.

progress: Mit diesem Element kann man Fortschrittsangaben bei verschiedenen Vorgängen definieren, das Element wird per DOM gesteuert.

HTML5 Formulare

Bei der Weiterentwicklung der Formular-Technik wurde die bereits sehr ausgereifte Spezifikation Web Forms 2.0 in HTML5 integriert, die einige Neuerungen bietet:

Definierte Eingabetypen beispielsweise für Internetadressen, Emailadressen, Datum und Zeitangaben, Zahlenwerte, etc. - Die Prüfung auf syntaktische Korrektheit kann dann vom Browser übernommen werden, wobei natürlich alle eingehenden Daten vom Backend wie bisher eingehend geprüft werden müssen.
Eingabefelder können als Pflichtfelder definiert werden
Dynamische Eingabefelder mit der Möglichkeit, weitere Felder hinzuzufügen
Sinnvolle Attribute wie autocomplete (an/aus) oder required für Formularfelder
Reguläre Ausdrücke (Regex) sowie "Ranges" (min/max) für Eingabefelder

Beispiele mit Quelltext für neue Eingabetypen wie Datetime, number, Range, Search und Color

CSS3 - Kleiner, schneller, besser!

Wie auch bei HTML5 wird CSS3 nur sporadisch von einigen Browsern unterstützt, Microsoft hat immerhin für die Version 9 des Internet Explorers volle CSS3-Unterstützung angekündigt - man kann gespannt sein. Wer sich für die HTML5 interessiert, wird sicher auch die neuen Möglichkeiten von CSS3 nutzen wollen. Neben Schatteneffekten oder Transparenz/Opazität werden nun auch RGBA Farben sowie SVG als Hintergrundbilder unterstützt. Mehrspaltige Layouts können dank neuer CSS-Eigenschaften schnell und einfach erstellt werden, aber natürlich gibt es auch viele Verbesserungen im Detail, wie beispielsweise der verbesserte Zeilenumbruch oder die Möglichkeit, im CSS mit Hilfe von calc() Breiten- und Längenangaben direkt zu berechnen.

Mehr zum Thema sowie Beispiele mit Quelltext in unserem CSS3 Special.

HTML5 Spiele

Die meisten modernen Browserspiele setzen zur Zeit voll auf Flash, doch dies könnte sich in nächster Zeit ändern. Die ersten Spiele komplett in HTML5 stehen bereits im Netz, auf der HTML5 Spiele Seite findet man bereits jetzt eine kleine Auswahl von Spielen, die gänzlich ohne Flash, JavaFX oder Silverlight auskommen. Das Zaubermittel ist das neue Canvas-Element, daß zur Zeit leider noch nicht von allen Browsern unterstützt wird.