Written By Jerry Low . Published on 16 Jun, 2010 .
What’s up with the hype of HTML5?
HTML5 is currently being developed as the next major revision of HTML and it is still far away from W3C recommended release date (year 2022 or later). However with the release of Apple iPad, the topic is got extremely heated and almost every web designer are talking/reading/writing/blogging/twitting about it.
Moreover, many early adapters (web developers and geeks) started creating some cool stuffs wtih the cleaner HTML5/CSS3 codes. In case you wanted to be one of them but don’t know where to start, here are list of useful HTML5 tutorials to get you started. It’s been a long week searching and reading on these tutorials (hey, I’m new to this too!) – I hope you make good use of them. Also, if you are one of the authors of these tutorials – I couldn’t thank you guys enough! It’s been a great learning journey reading each of these; thank you very, very much.
*Quick note: This post was updated on Nov 2011.
0. Udemy’s HTML5 Crash Course
Need a complete beginner lessons in HTML5? Udemy has the best in it. Taught by Robin Nixon, author of Learning PHP, MySQL, and JavaScript, the course covers pretty much everything a newbie need to know in HTML5, including basic HTML coding, HTML5 canvas for drawing, geolocation, local storage, as well as HTML5 audio and video.
Check out Udemy’s HTML5 Beginners Crash Course
1. HTML5 Getting Started Guide
Concise beginner guide in HTML5 – newbies should start reading from here.
2. Preview of HTML5
This was an ‘overview’ on HTML5 published back in late 2007. Nevertheless, it is still a good learning source for those who are unfamiliar with the codes. Personally I like the ‘big picture’ this article offers.
3. What Does It All Mean (Dive into HTML5)
‘Dive Into HTML5’ is a HTML guide book to be published by O’Reilly. The chapter ‘What Does It All Mean’ offers a clear explanation on the basics of HTML5 semantics/elements.
Read What Does It (HTML5 elemenets) All Mean
4. HTML5 Demos and Examples
It’s always easier to learn something new via examples. This site provides up to 20 examples of HTML5 experimentations and demos (with source code!).
5. HTML5 Differences From HTML4
Detail comparison guide of HTML4 and HTML5 by the W3C (there is no better source than this!).
Read HTML5 differences from HTML4
6. HTML5 and CSS3: The Techniques You’ll Soon Be Using
This is a great tutorial that combines the application of HTML5 and CSS3 – must read for beginner/advance level of web developer and designer.
Read HTML5 & CSS3: The Techniques You’ll Soon Be Using
7. HTML5 localStorage()
One of the best things you can do with HTML5 is to establish a client side database (on user browser) with localStorage. To start using this awesome HTML5 function, the HTML5 localStorage() tutorial series (4 detail articles) published at PaperKilledRock.com comes very handy.
8. HTML5 Canvas Cheat Sheet
The information provided is pretty much just a condensed copy of WHATWG specifications. However the .pdf file is definitely a must have on your notice board (especially when you are dealing with a HTML5 project that involves loads of canvas elements).
9. Designing A Blog With HTML5
This is a tutorial that every blog theme developer will need to read. (You should also read the author’s blog Bruce Lawson for more related updates.)
Read Designing a blog with HTML5
10. HTML5 Cheat Sheet
What can I say? Everyone loves a cheat sheet or two. 
Parsing websites is gonna be a big challenge to search engines now.
[...] 10 Must Read HTML5 Lessons [...]
[...] By the way, check out some of the tutorials and lessons I read recently on the subject: 10 Must Read HTML5 Lessons. [...]
Also feel free to check out: http://www.html5laboratory.com
All comments welcome.
hi there,
thanks for compiling the list.
BR,
~A
2022?
Damn that’s far off.
[...] Learn HTML5: 10 Must Read Lessons [...]
[...] Learn HTML5: 10 Must Read Lessons has a bunch of good stuff. [...]
Nice list! Some amazing stuff here.
[...] Learn HTML5: 10 Must Read Lessons [...]
[...] Learn HTML5: 10 Must Read Lessons (webhostingsecretrevealed.com) [...]
[...] finden sich die 10 MustReadLessons zu HTML5 Dieser Beitrag wurde unter Grafik veröffentlicht. Setze ein Lesezeichen auf den [...]
4 is good for now and yes, 5 will be a welcome improvement. It’s a bit like the automobile and petrol pump story. It’s gonna take time. Cheers…
I love the idea of stepping our the box and looking at new business opportunities from a different angle. A buddy of mine owns a gun store with a shooting range that is right across the street from a topless club. He came up with a concept to hire topless dancers as the range officers for the gun range. He actually implemented the plan and the place was flooded with male customers. As this plan went forward a few issues arose:
Trying to draw a basic stick man in html 5 css that walks. If anyone has any sample code that achieves this or can point me to a tutorial that does I would be grateful. (please note I have seen the tutorials on drawing shapes)
Thanks in Advance
not html5 was made with search engines in mind!
Thank you very much for links to these sites. It certainly is a great start to HTML 5
[...] HTML5 Tutorial – Getting Started iPhone Safari Dev Stuff -> Tech Javascript Closures Learn HTML5: 10 Must Read Lessons Minimize payload size Mobile Web Application Best Practices Periodic Table of the Elements – [...]
That should be “almost every web designer IS talking/reading/writing/blogging/twitting about it.”
[...] Learn HTML 5: 10 Must Read Lessons [...]
Hey, I am just learning html5. Looking at the “starter-template” i see div ids that do not have declarations. For example, I don’t see (body class) “home”, “page-header”, “page-content” in the stylesheets?? Plus, does “” cover all h1, h2, h3 etc styles? Lastly, is there a reference guide for how each item reacts? ie Does “article” work in a way that can only be used for blocks of text inside the div, and is it’s positioning restricted somehow, etc??
The “” in my last post was supposed to reference “hgroup”, FYI
[...] Learn HTML5: 10 Must Read Lessons (WebHostingSecretRevealed.com | Jun 16, 2010) [...]
[...] Learn HTML5: 10 Must Read Lessons (WebHostingSecretRevealed.com | Jun 16, 2010) [...]
[...] Learn HTML5: 10 Must Read Lessons (WebHostingSecretRevealed.com | Jun 16, 2010) [...]
[...] HTML5????10??? [...]
[...] Top Ten HTML5 Lessons: http://www.webhostingsecretrevealed.com/featured-articles/learn-html5-10-must-read-lessons/ [...]
This stuff is going to hit much sooner than 2022. Already, I am seeing almost every employer looking to hire web designers is requiring HTML5/CSS3 and JQuery.
Thank you for compiling such a useful list
[...] Side note: In case you are new to HTML 5 and wish to learn more, also check out Jerry’s post on Learn HTML 5: 10 Must Read Lessons. [...]
[...] know, free tutorials and blogposts (as listed here: 10 Must Read HTML5 Lessons) are good quick learning resources; but, they are not the best for many web developers and [...]
i can say it’s good step and also Technology is a something under process and never becomes end ,,,,,
many thanks
great list of HTML5 tutorials. It will soon be the way coupled with CSS3. 10 years of waiting for an upgrade from HTML4 – good resource
[...] Read Designing a blog with HTML5 10. HTML5 Cheat Sheet This is a tutorial that every blog theme developer will need to read. Learn HTML5: 10+1 Must Read Lessons [...]
[...] Learn HTML5: 10 Must Read Lessons [...]
That’s one great lesson soon im going to try it
Is it for sure working because i cant make it work …
[...] Learn HTML5: 10 Must Read Lessons [...]
[...] ?? HTML5?10 ????? [...]
[...] ?? HTML5 ????60+ ?????????????????? ?? HTML5?10 ????? HTML5 ??? HTML5 ? CSS3 ??????? 15 ???? CSS3 ? HTML5 ????? [...]