Obwohl die HTML5-Spezifikation offiziell erst 2022 fertiggestellt sein wird (obwohl sie größtenteils bis 2014 fertiggestellt sein wird), beschäftigen sich viele Designer bereits mit den Teilen von HTML5, die derzeit in modernen Browsern unterstützt werden.
HTML5 eröffnet völlig neue Möglichkeiten für Webdesign und Webanwendungsentwicklung, die bisher nur mit JavaScript oder Flash möglich waren.
Hier haben wir 175 Ressourcen zum Erlernen von HTML5 zusammengestellt. Nachfolgend finden Sie Tutorials, Frameworks, Beispiele und vieles mehr.
Teilen Sie gerne weitere hochwertige Ressourcen in den Kommentaren!
Grundlegende Tutorials
Ein sehr einfaches Tutorial von W3sbchools.com.
HTML5 für Anfänger. Benutzen Sie es jetzt, es ist ganz einfach!
Ein Einführungsleitfaden von What!? Wir reden gerne darüber.
28 HTML5-Funktionen, Tipps und Techniken, die Sie kennen müssen
Eine Sammlung sehr nützlicher HTML5-Tipps von Nettuts+.
Ein 40-minütiges Video-Tutorial von Google-Mitarbeiter Brad Neuberg.
Kurzer Tipp: HTML5-Funktionen, die Sie jetzt verwenden sollten
Ein Screencast von Nettuts+.
Ein toller Überblick über die Vorteile von HTML5, sowie einige sehr hilfreiche Tipps.
Vorbereitung auf HTML5 mit semantischen Klassennamen
Ein Artikel von Jon Tan über die neuen semantischen Klassen in HTML5.
HTML5: Die Grundlagen (1 von 4)
Eine Einführung in HTML5 mit Informationen zu APIs, neuen Elementen und mehr.
Alles, was Sie über HTML5 wissen müssen
Eine Einführung von TechRadar UK.
Eine sehr einfache Tutorial-Site.
Eine Einführung in die Struktur-Tags, die viele Divs ersetzen werden.
HTML5 rockt mich aus den Socken
Ein sehr nützlicher Leitfaden für Anfänger zu HTML5
Eine einfache Anleitung zum Frontend-Design mit HTML5.
Eine riesige Diashow über HTML5, erstellt in HTML5.
Eine Einführung in das Header-Element von HTML5 Doctor.
HTML5 und die Zukunft des Webs
Dieser Artikel vom Juli 2009 behandelt die Grundlagen von HTML5.
CSS-Codestruktur für HTML5: Einige nützliche Richtlinien
Einige nützliche Richtlinien von Woork.
HTML5 entfesselt: Tipps, Tricks und Techniken
Eine Übersicht mit Informationen zu semantischem Markup, Formularen und mehr.
Erstellen von Websites in HTML5
HTML5-Tutorial – Erste Schritte
Ein einfaches HTML5-Tutorial, das eine einfache Vorlagendatei enthält.
Programmieren Sie ein lebendiges professionelles Webdesign mit HTML5/CSS3
Codieren Sie ein abwärtskompatibles, einseitiges Portfolio mit HTML5 und CSS3
Tutorial: Fallstudie mit HTML5 und CSS3
Berühren Sie die Zukunft: Erstellen Sie eine elegante Website mit HTML5 und CSS3
Codierung einer einseitigen CSS3- und HTML5-Website-Vorlage
Codieren eines HTML-Layouts von Grund auf
HTML5 und CSS3: Die Techniken, die Sie bald verwenden werden
Entwerfen und programmieren Sie eine coole iPhone-App-Website in HTML5
Einfaches Website-Layout-Tutorial mit HTML5 und CSS3
Verwenden von HTML5 zur Transformation des TwentyTen-Themes von WordPress
Ein Tutorial, um mehr HTML5-Elemente als das Standard-TwentyTen-Design zu nutzen.
HTML5 und CSS3 in Dreamweaver CS5 – Teil 1: Erstellen der Webseite
Der erste Teil einer mehrteiligen Serie zum Codieren in HTML5 und CSS3 in Dreamweaver von Adobe.
Erstellen Sie moderne Websites mit HTML5 und CSS3
Ein Tutorial für Fortgeschrittene von DeveloperWorks des IMB.
Erstellen von Webseiten mit HTML5
Von Wireds Webmonkey
Entwerfen eines Blogs mit HTML5
Canvas-Tutorials
Eine HTML5-Diashow mit Canvas und jQuery
Mit HTML5 und JavaScript einen Ball herumhüpfen lassen
So zeichnen Sie mit HTML5 Canvas
Eine umfassende Einführung in das Zeichnen mit Canvas von Think Vitamin.
Eine ausführliche Einführung in Canvas von Dev.Opera.
Denken Sie über die Barrierefreiheit von HTML5 Canvas nach
Ein Überblick über Überlegungen zur Barrierefreiheit von Canvas.
Leitfaden für HTML5-Canvas-Elemente
Ein umfassender Leitfaden von Six Revisions.
Ein Canvas-Tutorial vom Mozilla Developer Network, das das Zeichnen von Formen, die Verwendung von Bildern und vieles mehr umfasst. Geeignet für Leinwand-Anfänger.
Tutorials zur lokalen Speicherung
Erstellen Sie dauerhafte Haftnotizen mit lokaler Speicherung
Ein praktisches Tutorial zur lokalen Speicherung.
Quelltext-Tutorial ansehen: Haftnotizen mit HTML5 und CSS3
Die Haftnotizen in diesem Tutorial haben einen coolen Animationseffekt, wenn sie geschlossen sind.
Browserspeicher für HTML5-Apps
Ein weiteres Tutorial zur Verwendung des lokalen Speichers in HTML5-Apps.
HTML5 localStorage – Teil Eins
Der erste Teil eines vierteiligen Tutorials.
Kurzer Tipp: Erfahren Sie mehr über den lokalen HTML5-Speicher
Ein Video-Tutorial von Nettuts+.
webOS HTML5-Datenbankspeicher-Tutorial
Ein Tutorial zur Verwendung der lokalen Speicherfunktionalität von HTML5 mit Palms webOS.
Formular-Tutorials
Haben Sie einen großen Tag mit HTML5-Formularen
So erstellen Sie browserübergreifende HTML5-Formulare
Entwerfen von Suchfeldern mit HTML5 und CSS3
Einige kurze Informationen darüber, was HTML5 für das Formulardesign bedeuten wird.
Video- und Multimedia-Tutorials
Erstellen eines benutzerdefinierten HTML5-Videoplayers mit CSS3 und jQuery
Tutorial: So erstellen Sie einen HTML5-Videoplayer
HTML-Video vergrößern und in den 3D-Raum abbilden
Tutorial: Browserübergreifende Bereitstellung von HTML5-Videos (einschließlich iPad)
Ein umfassendes Tutorial zu HTML5-Videos.
Eine Einführung in die Verwendung des Videoelements von HTML5 Doctor.
App-Tutorials
So erstellen Sie eine HTML5-iPhone-App
In diesem Tutorial erfahren Sie, wie Sie eine Offline-HTML5-App für ein iPhone erstellen.
HTML5-Apps: Positionierung mit Geolocation
Eine Einführung in die Geolocation-APIs in HTML5.
Erstellen mobiler Webanwendungen mit HTML5, Teil 1
Aus DeveloperWorks von IBM, der erste Teil einer fünfteiligen Serie aus dem Jahr 2010.
Erstellen Sie Offline-Webanwendungen auf Mobilgeräten mit HTML5
Ein weiterer Leitfaden von IBM DeveloperWorks.
HTML5-Apps: Was, Warum und Wie
Eine Übersicht von Nettuts+, mit praktischen Ideen.
Weitere Tutorials
So erstellen Sie eine hübsche Popup-Leiste mit HTML5, CSS3 und jQuery
Ein praktisches Tutorial von SpyreStudios.
So sorgen Sie dafür, dass alle Browser HTML5-Markup korrekt rendern – sogar IE6
Von Nettuts+.
HTML5 und CSS3 ohne Schuldgefühle
Tools und Techniken, um HTML5 und CSS3 browserübergreifend kompatibel zu machen.
Implementierung von HTML5 Drag & Drop
Ein Nettuts+ Premium-Tutorial.
Meine Top 5 HTML-Codierungspräferenzen
Mit Begründungen für die Präferenzen und einigen tollen Anleitungen.
HTML5-Mikrodaten: Willkommen in der Maschine
Ein Überblick über die Mikrodatenspezifikation.
Kombination moderner CSS3- und HTML5-Techniken
Ein Nettuts+ Premium-Tutorial.
HTML5: Navigationsmehrdeutigkeit behoben
Einige Erläuterungen zur Angemessenheit der Verwendung des Navigationselements von Jeffrey Zeldman.
HTML5-Spickzettel und Kurzreferenzen
Ein sehr praktisches Diagramm, das Browserkompatibilität für HTML5 und CSS3 bietet.
Eine interaktive Infografik, die die Kompatibilität verschiedener HTML5-Elemente für jeden gängigen Browser bietet.
Ein faltbares Taschen-Referenzhandbuch.
Ein Diagramm der W3C-Schulen.
Von HTML5 Doctor.
Die offizielle W3C-Referenz.
Vom W3C.
Eine Auswahl unterstützter Funktionen in HTML5
Eine Tabelle, die zeigt, welche Browser welche Funktionen abdecken.
Überprüfen Sie die Kompatibilität verschiedener HTML5-Elemente in verschiedenen Browsern.
Vergleich von Layout-Engines (HTML5)
Ein Vergleich der Unterstützung von HTML5 und HTML4 für eine Reihe von Browser-Layout-Engines aus Wikipedia.
HTML5-ID/Klassenname-Spickzettel
Eine Anleitung zu HTML5-Strukturelementen.
Testet Ihren aktuellen Browser auf HTML5-Unterstützung und zeigt die Ergebnisse anderer Browser an.
Eine Tabelle mit Änderungen an der Norm.
Eine praktische Website, die zeigt, was Ihr Browser hinter den Kulissen mit bestimmten HTML5-Elementen macht.
Websites speziell für HTML5
Die Website enthält das offizielle HTML5-Logo sowie eine Galerie und Merchandise-Links.
HTML5 Tutorial bietet eine große Auswahl an HTML5-Tutorials und Neuigkeiten.
Eine Sammlung grundlegender, kostenloser HTML5-Vorlagen.
Enthält Tutorials, Ressourcen und einen Spielplatz zum Experimentieren mit HTML5.
Enthält Fragen und Antworten, Artikel und mehr.
Eine Website voller Canvas-Tutorials und einer Vitrine.
Der Blog der Gruppe, die am HTML5-Standard arbeitet.
Eine HTML5-News- und Tutorial-Site.
Eine Website, die sich dem Unterrichten der Entwicklung mobiler HTML5-Web-Apps widmet.
Rahmenwerke
Ein solides HTML5-Standard-Framework.
Das Less Framework 4 ist ein CSS3- und HTML5-Framework mit Optionen für Mobil-, Tablet- und Desktop-Raster.
Ein Framework, das HTML5, CSS3 und JavaScript kombiniert.
Ein HTML5-Anwendungsframework.
Ein HTML5- und CSS3-WordPress-Starter-Theme.
Ein HTML5-Spiel-Framework.
Ein CSS-Raster, das Stile für einige HTML5-Elemente enthält.
Ein auf HTML5 basierendes E-Book-Framework für das iPad.
Eine HTML5-JavaScript-Bibliothek für Videos.
Eine HTML5-basierte JavaScript-Bibliothek für mobile Web-Apps.
HTML5-Multimedia-Framework für WordPress
Ein HTML5-Multimedia-Framework in einem WordPress-Plugin.
Ein HTML5-Starter-Theme für WordPress.
Ein HTML5-Framework-Generator.
Ein mobiles HTML5-Anwendungsframework.
Der offizielle Leitfaden zum HTML5-Boilerplate
Ein Screencast von Nettuts+
Vitrinen
HTML5-Webdesign-Galerie.
Eine Galerie außergewöhnlicher HTML5-Sites aus der ganzen Welt.
Eine weitere Galerie mit HTML5-Site-Designs.
Ein weiteres Schaufenster großartiger HTML5-Sites.
Schaufenster für HTML5-Webdesign.
HTML5-Showcase: 48 potenzielle Flash-killende Demos
Von HongKiat.
Eine Sammlung von Websites, die auf HTML5 basieren.
Eine Präsentation von Anwendungen, Spielen, Tools und Tutorials für HTML5 Canvas.
12 wunderschöne HTML5-Webdesign-Showcases
Eine Präsentation von 12 HTML5-Websites.
Auf dem Weg in die Zukunft: 25 hochmoderne Websites mit HTML5
Eine Präsentation von 25 HTML5-basierten Designs.
30 großartige Websites, die HTML5 in ihrem Kernlayout verwenden
Ein weiteres Schaufenster HTML5-basierter Websites.
Demos und Beispiele
Eine Sammlung von Beispielen dafür, was Sie mit HTML5 machen können, mit einer praktischen Tabelle zur Browserkompatibilität.
HTML5-Canvas und Audio-Experiment
Eine sehr coole HTML5-Canvas-Animation.
Eine Reihe von Element- und Layout-Experimenten und Demos.
Ein HTML5-Videoplayer.
Ein kostenloser HTML5-Videoplayer.
10 HTML5-Demos, die Sie Flash vergessen lassen
12 unglaubliche HTML5-Experimente
Ein weiterer HTML5-Videoplayer.
Sorgt dafür, dass Video- und Audio-Tags in allen gängigen Browsern funktionieren.
Eine JavaScript-Bibliothek, die HTML5- und CSS3-Elemente mit älteren Browsern kompatibel macht.
Bücher
Von Jeremy Keith, veröffentlicht von A Book Apart.
HTML5: Rich-Internet-Anwendungen entwerfen
Von Matthew David.
HTML5 und CSS 3 für die reale Welt
Von Alex Goldstein, Louis Lazaris und Estelle Weyl
Der grundlegende Leitfaden zu HTML5: Mithilfe von Spielen HTML5 und JavaScript lernen
Von Jeanine Meyer.
HTML5 und CSS3: Entwickeln Sie schon heute mit den Standards von morgen
Von Brian P. Hogan.
HTML5 Canvas: Native Interaktivität und Animation für das Web
Von Steve Fulton und Jeff Fulton, veröffentlicht von O’Reilly.
Pro HTML5- und CSS3-Designmuster
Von Michael Bowers. Erscheint im September 2011, ist jedoch im Rahmen des Alpha-Programms von Apress erhältlich.
Von Peter Lubbers, Brian Albers und Frank Salim.
HTML5-Lösungen: Grundlegende Techniken für HTML5-Entwickler
Von Marco Casario, Peter Elst, Charles Brown, Nathalie Wormser und Cyril Hanquez.
Foundation HTML5 Canvas: Für Spiele und Unterhaltung
Von Rob Hawkes.
Foundation HTML5-Animation mit JavaScript
Von Keith Peters und Billy Lamberta.
Der ultimative Leitfaden für HTML5-Videos
Von Silvia Pfeiffer.
Von Joseph W. Lowery und Mark Fletcher.
Eine vollständige E-Book-Einführung in HTML5 von Mark Pilgrim.
Von Bruce Lawson und Remy Sharp.
Von Bill Sanders.
Weitere Ressourcen und Artikel
Wie HTML5-Web-Sockets mit Proxyservern interagieren
From A List Apart, veröffentlicht im Dezember 2007.
Ja, Sie können HTML5 noch heute verwenden!
Ein Sitepoint-Artikel von Mitte 2009.
Ein ausführlicher Einführungsartikel von Perishable Press, veröffentlicht Mitte 2009.
Eine Diskussion der semantischen Elemente von HTML5 aus A List Apart, veröffentlicht im Jahr 2009.
Kaltura HTML5-Medienbibliothek
Eine JavaScript-Bibliothek, mit der Sie HTML5-Video- und Audio-Tags in einer Vielzahl von Browsern verwenden können.
Weitere Informationen zur Entwicklung von Namenskonventionen, Mikroformaten und HTML5
Von For A Beautiful Web.
Von Adactio.
Steve Smith über HTML5 und CSS3
Kommentar darüber, was HTML5 und CSS3 für Webdesign bedeuten, von Think Vitamin.
HTML5 und CSS3: Bringen Sie Ihr Design auf eine andere Ebene
Aus dem Webdesign-Ledger.
HTML5: Die Fakten und die Mythen
Ein Überblick über viele Mythen und Missverständnisse über HTML5 vom Smashing Magazine.
Eine Sitzung von Nettuts+.
Ein großartiger Kommentar zum Erstellen von Apps mit HTML5.
Weitere HTML5-Zusammenfassungen
Die ultimative HTML5-Toolbox: Über 60 Artikel, Tutorials, Ressourcen und inspirierende Showcases
Von Creative Fan.
Lernen Sie HTML5: 10 Lektionen, die Sie unbedingt lesen müssen
Von Webhosting Secrets Revealed
Von Think Vitamin.
Ultimative Sammlung von HTML5- und CSS3-Ressourcen
Von Smashing Share.
15 nützliche CSS3- und HTML5-Vorlagen und Frameworks
Vom Speckyboy Design Magazine.
23 wesentliche HTML5-Ressourcen
Von Think Vitamin/
70 unverzichtbare CSS3- und HTML5-Tutorials und -Ressourcen
Von Webappers.
Eine Sammlung von HTML5-Ressourcen und Tutorials
Vom Speckyboy Design Magazine.
25 grundlegende HTML5-Tutorials und -Techniken
Von Template Monster.
HTML5-Tutorials und -Techniken, die Sie beschäftigen werden
Von Noupe.
15 nützliche HTML5-Tutorials und Spickzettel
Aus dem Webdesign-Ledger.
Die einzigen HTML5-Ressourcen, die Sie benötigen, um sich auf den neuesten Stand zu bringen
Aus sechs Revisionen.
22 ausgezeichnete HTML5-Tutorials
Von BlogFreakz
40 unverzichtbare HTML5-Tutorials, Techniken und Beispiele für Webentwickler
Vom stilvollen Webdesigner.
Über 30 sehr nützliche HTML5-Beispiele, Tutorials und Techniken
Aus dem Tripwire Magazine.
Exklusiv für WDD geschrieben von Cameron Chapman.
Haben Sie eine Lieblingsressource, die wir nicht behandelt haben? Lass es uns in den Kommentaren wissen!
