Despite the fact that the HTML5 specification won’t officially be finished until 2022, (though it will be mostly finalized by 2014), a lot of designers are already diving into the parts of HTML5 that currently have support in modern browsers.
HTML5 opens up some whole new avenues for web design and web application development, things that were previously only possible with either JavaScript or Flash.
Here we’ve rounded up 175 refsources for learning HTML5. Included below are tutorials, frameworks, examples, and a lot more.
Feel free to share more high-quality resources in the comments!
Basic tutorials
A very basic tutorial from W3sbchools.com.
An introductory guide from What!? We Like To Talk About.
A collection of very useful HTML5 tips from Nettuts+.
A 40-minute video tutorial from Google employee Brad Neuberg.
A screencast from Nettuts+.
A great overview of the advantages of HTML5, as well as some very helpful tips.
An article from Jon Tan on the new semantic classes in HTML5.
An introduction to HTML5, with information about APIs, new elements, and more.
An introduction from TechRadar UK.
A very basic tutorial site.
An introduction to the structural tags that will replace many divs.
A very useful beginner’s guide to HTML5
A simple guide to front-end design with HTML5.
A huge slideshow about HTML5, built in HTML5.
An introduction to the header element from HTML5 Doctor.
From July 2009, this article covers the basics of HTML5.
Some useful guidelines from Woork.
An overview that includes info on semantic markup, forms, and more.
Building sites in HTML5
A basic HTML5 tutorial that includes a basic template file.
A tutorial to take advantage of more HTML5 elements than the default TwentyTen theme.
The first in a multi-part series on coding in HTML5 and CSS3 in Dreamweaver, from Adobe.
An intermediate tutorial from IMB’s developerWorks.
From Wired’s Webmonkey
Canvas tutorials
A comprehensive introduction to drawing with Canvas, from Think Vitamin.
An in-depth introduction to Canvas from Dev.Opera.
An overview of considerations for making Canvas accessible.
A comprehensive guide from Six Revisions.
A canvas tutorial from Mozilla Developer Network that includes drawing shapes, using images, and much more. Suitable for canvas beginners.
Local storage tutorials
A practical local storage tutorial.
The sticky notes in this tutorial have a cool animation effect when they’re closed.
Another tutorial for using local storage in HTML5 apps.
The first in a four-part tutorial.
A video tutorial from Nettuts+.
A tutorial for using HTML5′s local storage functionality with Palm’s webOS.
Form tutorials
Some brief information about what HTML5 will mean for form design.
Video and multimedia tutorials
A comprehensive tutorial on HTML5 video.
An introduction to using the video element from HTML5 Doctor.
App tutorials
This tutorial teaches you how to create an offline HTML5 app for an iPhone.
An introduction to the geolocation APIs in HTML5.
From IBM’s developerWorks, the first in a five-part series from 2010.
Another guide from IBM’s developerWorks.
An overview from Nettuts+, with practical ideas.
More tutorials
A practical tutorial from SpyreStudios.
From Nettuts+.
Tools and techniques to make HTML5 and CSS3 more cross-browser compatible.
A Nettuts+ Premium tutorial.
With reasoning behind the preferences, and some great how-to info.
An overview of the microdata specification.
A Nettuts+ Premium tutorial.
Some clarification on the appropriateness of using the nav element from Jeffrey Zeldman.
HTML5 cheat sheets and quick references
A very handy chart that includes browser compatibility for both HTML5 and CSS3.
An interactive infographic that gives compatibility of different HTML5 elements for each major browser.
A foldable pocket reference guide.
An infographic that explains what HTML5 is and what it’s capable of doing.
A chart from the W3C Schools.
From HTML5 Doctor.
The official W3C reference.
From the W3C.
A chart covering which browsers cover which features.
Check compatibility of different HTML5 elements in a variety of browsers.
A comparison of support for HTML5 vs HTML4 for a number of browser layout engines, from Wikipedia.
A guide to HTML5 structural elements.
Tests your current browser for HTML5 support, and shows the scores of other browsers.
A chart covering revisions to the standard.
A handy site that shows what your browser is doing behind the scenes with certain HTML5 elements.
Sites dedicated to HTML5
Site includes the official HTML5 logo, as well as a gallery and merchandise links.
HTML5 Tutorial has a wide variety of HTML5 tutorials and news.
A collection of basic, free HTML5 templates.
Includes tutorials, resources, and a playground for experimenting with HTML5.
Includes a Q&A, articles, and more.
A site filled with Canvas tutorials and a showcase.
The blog of the group working on the HTML5 standard.
An HTML5 news and tutorial site.
A site dedicated to teaching the development of HTML5 mobile web apps.
Frameworks
A solid HTML5 default framework.
The Less Framework 4 is a CSS3 and HTML5 framework with options for mobile, tablet, and desktop grids.
A framework that combines HTML5, CSS3, and JavaScript.
An HTML5 application framework.
An HTML5 and CSS3 WordPress starter theme.
An HTML5 game framework.
A CSS grid that includes styles for some HTML5 elements.
An ebook framework for the iPad built on HTML5.
An HTML5 JavaScript library for video.
An HTML5-based JavaScript library for mobile web apps.
An HTML5 multimedia framework in a WordPress plugin.
An HTML5 starter theme for WordPress.
An HTML5 framework generator.
A mobile HTML5 application framework.
A screencast from Nettuts+
Showcases
HTML5 web design gallery.
A gallery of exceptional HTML5 sites from around the world.
Another gallery of HTML5 site designs.
Another showcase of great HTML5 sites.
HTML5 web design showcase.
From HongKiat.
A collection of sites built on HTML5.
A showcase of applications, games, tools and tutorials for HTML5 Canvas.
A showcase of 12 HTML5 websites.
A showcase of 25 HTML5-based designs.
Another showcase of HTML5-based sites.
Demos and examples
A collection of examples of what you can do with HTML5, with a handy chart for browser compatibility.
A very cool HTML5 Canvas animation.
A series of element and layout experiments and demos.
An HTML5 video player.
A free HTML5 video player.
Another HTML5 video player.
Makes video and audio tags work in all major browsers.
A JavaScript library that makes HTML5 and CSS3 elements compatible with older browsers.
Books
By Jeremy Keith, published by A Book Apart.
By Matthew David.
By Alex Goldstein, Louis Lazaris, and Estelle Weyl
By Jeanine Meyer.
By Brian P. Hogan.
By Steve Fulton and Jeff Fulton, published by O’Reilly.
By Michael Bowers. Coming out in September 2011, but available as part of Apress’s Alpha Program.
By Peter Lubbers, Brian Albers, and Frank Salim.
By Marco Casario, Peter Elst, Charles Brown, Nathalie Wormser, and Cyril Hanquez.
By Rob Hawkes.
By Keith Peters and Billy Lamberta.
By Silvia Pfeiffer.
By Joseph W. Lowery and Mark Fletcher.
A complete ebook introduction to HTML5, from Mark Pilgrim.
By Bruce Lawson and Remy Sharp.
By Bill Sanders.
More resources and articles
From A List Apart, published in December 2007.
A Sitepoint article from mid-2009.
An in-depth introductory article from Perishable Press, published in mid-2009.
A discussion of the semantic elements of HTML5, from A List Apart, published in 2009.
A JavaScript Library that lets you use HTML5 video and audio tags in a variety of browsers.
From For A Beautiful Web.
From Adactio.
Commentary about what HTML5 and CSS3 mean for web design, from Think Vitamin.
From Web Design Ledger.
A rundown of many of the myths and misconceptions about HTML5, from Smashing Magazine.
A session from Nettuts+.
A great commentary on building apps with HTML5.
More HTML5 roundups
From Creative Fan.
From Webhosting Secrets Revealed
From Think Vitamin.
From Smashing Share.
From Speckyboy Design Magazine.
From Think Vitamin/
From Webappers.
From Speckyboy Design Magazine.
From Template Monster.
From Noupe.
From Web Design Ledger.
From Six Revisions.
From BlogFreakz
From Stylish Web Designer.
From Tripwire Magazine.
Here we’ve rounded up 175 refsources for learning HTML5. Included below are tutorials, frameworks, examples, and a lot more.
ReplyDeletevumoo