In diesem File, basierend auf dem Starter Layout von DW CS5 mit HTML5 Extension, versuche ich Ihnen in aller Kürze die wichtigsten Neuerungen zusammen zu tragen.

Neue HTML Tags erlauben nun inhaltliche Auszeichnungen. Das erleichtert nicht unbedingt das Gestalten, aber es hilft Suchmaschienen und Readern, die Inhalte richtig zu indizieren, bzw. vorzulesen.

So strukturiert man mit dem <article> Tag die einzelnen Abschnitte. Innerhalb einer <section> werden diese inhaltlich noch einmal zusammen gefasst.

Der eigentliche Hauptgewinn ist CSS3 zu verdanken. So gibt es viele neue Kleinigkeiten, die uns Designern immer wieder das Leben erleichtern.

1. Bilder als Rahmenelemente. Damit sind natürlich Schmuckränder und Ornamente möglich. Ebenso, sozusagen als Randeffekt sind nun mehrfarbige Ränder möglich, indem man mehrere Farben pro Deklaration angibt (derzeit nur Firefox.).
2. Textschatten und Box-Schatten. Dieser kann mit einer einfachen Deklaration erstellt werden: text-shadow: 15px 8px 7px #00ff00; Webkit jedenfalls hat noch Probleme.
   
3. Neue Farbräume - naja, nicht ganz - aber zumindest Halbtransparenzen durch RGBa Angaben. (Schade, dass es nicht eine HEX-Umsetzung dafür gibt.) Siehe Menüleiste im Kopf dieser Seite.
4. Runde Ecken mit Corner Effects mit corner-radius, sowie echte Schlagschatten.
5. Beliebige Schriftarten. Das Einbinden von von TrueType Schriften ist nun möglich. Allerdings sollte man daran denken, wie es mit den Lizenzrechten und der Datenlast aussieht - naja und Typografie ist ja auch nicht jedermanns Sache - mein Tipp: weniger ist mehr.
6. Endlich: Verzerrungen und Rotationen aller (Block-)Elemente mit vollem Funktionserhalt mit transforrm (siehe Menüleiste, die einfach gedreht wurde).
7. Statusübergänge, die vorher nur mit Hilfe aufwendigem JavaScript möglich waren. Es wird einfach z.B. bei der Deklaration des Hover-Statusses eine transition-duration:0.5s; angegeben um die Eigenschaft langsam einzublenden (Siehe Menüelemente).
8. Neue Einheiten. Nun können Zeitangaben in Sekunden oder Minuten und Stunden angegeben werden - Millisekunden und Umrechnerei sind also Vergangenheit.
9. Auf die Elemente im DOM kann nun auch mit der festen Funktion getElementbyID zurück gegriffen werden. Das erspart viel JavaScript.
10. Bessere Hintergrundgrafiken. Zumindest ist nun die Positionierung besser möglich. Ebenso, wie auf dieser Seite zu sehen: mehrere Hintergrundbilder pro Seite (sogar jedem einzelnen Element).
11. Hintergrundverläufe. Auch diese sind nun ganz einfach möglich. (Siehe nächster Abschnitt.) Allerdings ist die Deklaration recht kompliziert zu handhaben.

Viele komplett neue Ideen wurden in HTML5 entwickelt. Aktualle sind aber noch keine davon in den Browsern (und somit auch nicht in DW) implementiert. Ein Ausblick lohnt sich aber schon, denn so können unsere Hirne schon mal rattern und Programmierer träumen.

Microdata. Mit dieser Technik ist es möglich eigene (sagen wir mal) Applikationen zu erstellen und diese im Multi-Threading Betrieb der Seite laufen zu lassen. Viel Java und schwergewichtiger Code bleibt uns bald damit erspart.

Lokale Daten offline speichern. Das Stichwort "Session Data" ist bekannt. In diesen kleinen Textdateien können heute schon kleine Mengen an Daten gespeichert werden. Mit HTML5 wird es möglich sein mehrere Megabytes an Daten lokal im Browsewr zu speichern und zu verwalten. Das beschleunigt das Web und bietet ungeahnte Möglichkeiten.

SQL im Browser. Hierzu gehört auch die Möglichkeit so etwas wie SQL-Abfragen auf dem Client auszuführen. Klingt phantastisch - warten wir es ab.

Editierbarer Content. Seiten, die sich vom User verändern lassen? Für Blogs und Redaktionssysteme die Erlösung. Mit der kleinen Auszeichnung contenteditable="true" ist dies in HTNL5 möglich. (Versuchen Sie doch mal den Text dieser Aufzählung zu bearbeiten.)

Drag & Drop. Muss ich dazu noch mehr sagen? Endlich können wir Bilder und Elemente verschieben und so interaktive Benutzeroberflächen erstellen.

Die wohl am heftigsten diskutierten Neuerungen sind die Möglichkeiten Audio, Video ohne Player direkt in einer Website abzuspielen, sowie eine "Zeichenfläche" zu haben, auf der man erstellen kann. Diese Techniken lassen Euphorie aufkommen, Flash sei tot - doch das ist ein fataler Trugschluss...

Audio lässt nur ein Format zu: dass .ogg Format. Mit gewissen Attributen lässt sich der Player konfigurieren und autoplay aktivieren. (Ich fürchte mich jetzt schon vor der neuen Welle nervig dudelnder Webseiten.)

Mit Video ist es nicht viel anders: das Format muss .ogv oder .mp4 sein. Das bedingt bei vielen Videos ein erneutes Encoding. Achtung: zur Zeit unterstützen die Browser unterschiedliche Formate, daher sollte das Video teilweise doppelt zur Verfügung gestellt werden.

Viel wichtiger für Gestalter ist aber, dass es recht umständlich ist, den Player anzupassen. Hier sind die Möglichkeiten mit Flash eindeutig besser. Zudem unterstützt das .flv oder .f4v Format von Flash auf Halbtranzparenzen. So sind z.B. runde Videos möglich.

Canvas ist eine komplette Neuerfindung (oder doch nicht?). Dieser Tag erlaubt einen Bereich aufzuziehen, in dem mit besonderen Befehlen hineingezeichnet wird. So kann die Website dynamisch und grafisch werden, auch nachdem sie geladen wurde. Das erinnert etwas an den <iframe> Tag.

Die Technik, mit der in diesen Bereich gezeichnet wird ist JavaScript und SVG, einer Vektorsprache, die es schon seit über 10 Jahren gibt, aber bisher kaum einer verwendet hat. (Also doch ein alter Strumpf?) (Übrigens sollten Sie sich mal den Quelltext anzeigen lassen, der alleine nötig ist, um dieses rote Rechteck in der Zeichenfläche zu zeichnen - nun können Sie sich vorstellen, wie aufwendig komplexe Zeichnungen sind.)

Das bedeutet also, dass HTML5 nicht per se Grafiken kann - das kann X-HTML schon seit langem mit Hilfe von SVG - sondern nur, dass es nun einen Tag gibt, der eine entsprechende Zeichenfläche definiert, was früher recht umständlich geschehen musste.
Die Programmierung dieser Grafiken ist keinesfalls trivial - Flash ist da um einiges einfacher und gibt wesentlich mehr Freiheiten. Zudem unterstützt Canvas derzeit noch keine 3D Elemente und kennt keine Objektinstanzen und deren Manipulationen.

Daher bin ich der Meinung, dass Canvas (und die SVG Technik) Flash keinesfalls ersetzen wird - jedenfalls nicht in den nächsten Jahren. Und bis dahin hat sich das Web insgesammt weiter entwickelt - auch Flash.

Auch wenn es verlockend ist, mit diesen neuen Möglichkeiten gleich einmal loszulegen, so muss ich (derzeit) davor warnen.

1. HTML5 und CSS3 sind noch nicht definitiv als Standart definiert. So kann sich noch viel ändern. Die offizielle Verlautbarung des W3C ist, dass erst 2012 der Beta-Status erreicht werden soll und 2022 die finale Version gelten soll.
2. Die Browser unterstützen die Features noch nicht. Zumindest nicht alle und nicht alle Tags. (Siehe Wikipedia)
   Hier sollte man so lange noch die browserspezifischen Auszeichnungen ( -webkit- oder -moz- oder -o- ) verwenden. (Siehe Kommentare zu den Styles in diesem Dokument.)
3. Canvas und die tollen CSS Features ersetzen nicht Flash - oder andersrum. Es sind einfach wie früher verschiedene Welten. Der Gestalter ist in der Pflicht, das richtige Mittel für den entsprechenden Zweck einzusetzen. Die Kombination beider Welten macht wohl das Beste aus.
4. Entgegen aller Unkenrufen: Dreamweaver unterstützt HTML5. Und auch, wenn noch nicht alles implementiert ist, so ist doch klar, dass man die Tür vor neuer Technik nicht verschließt. Schließlich ist HTML5 noch nicht fertig - wie soll es dann ein Editor sein?