HTML5 is the exciting and long-awaited upgrade to HTML, featuring semantic tags, advanced functionality, and forming a powerful combination with CSS3. Most developers have heard about HTML5, and are pretty excited to start using it, but as with any new technology, there is a learning curve. Since it’s a relatively new development, there aren’t quite the plethora of tutorials and articles as there are with HTML4. But not to worry, there are still more than enough resources to get you started.
This post serves as the ultimate HTML5 toolbox. First, there’s a few introductory articles and videos to help you understand why HTML5 is important. Then we’ll dive right in with a collection of tutorials that are start-to-finish. Next, there’s a great collection of articles and tips that will help you understand more, and will cover some of the nuances of HTML5. There’s also tons of inspirational showcases, and a massive resource list that you can use to supercharge your productivity!
Introduction:
Introduction to HTML5 – Video – Everything you want to know about how HTML5 works, why HTML5 matters, and everything else.
A Preview of HTML5 – A great introductory article explaining HTML5 and why you should use it.
Website Creation Tutorials:
Design and Code a Cool iPhone App Website in HTML5
Coding an HTML5 Layout from Scratch
Touch the Future – Design an Elegant Website with HTML5 and CSS3
HTML5 and CSS3 – The Techniques You’ll Soon Be Using
Website Layout Tutorial: HTML5 and CSS3
Coding a CSS3 and HTML5 Single Page Website
Cheat Sheets:
HTML5 Cheat Sheet (PDF) by SmashingMagazine – A great cheat sheet from the Smashing Magazine gurus.
HTML5 Visual Cheat Sheet by Woork – A visually appealing and easy to use reference for HTML5 tags and properties.
HTML5 Pocket Book – A must-have reference for all developers who will be using HTML5.
HTML5 Glossary – A great glossary of topics relating to HTML5.
HTML5 Reference by the W3C – A great all-in-one reference by the W3C.
Useful Articles and Tips:
Structural Tags in HTML5 – Understanding the tags in HTML5 is key to being able to use it properly, and this article explains it all.
The Power of HTML5 and CSS3 – An article that explains how HTML5 and CSS3 work in tangent to deliver powerful results.
Have a Field Day with HTML5 Forms – HTML5 forms are incredibly powerful, so this article/tutorial teaches you how to use them.
HTML5 Rocks My Socks Off – An article explaining why HTML5 is so powerful that will convince you to start using it too!
Code Structure for HTML and CSS3 – A great article that helps you understand how HTML5’s semantic tags relate to website structure.
HTML5 Doctor – Helping You Implement HTML5 Today – A great resource that covers all sorts of HTML5 topics.
HTML5 Forms – What Support is there? – A useful guide to understanding which browsers support which HTML5 form features.
Inspiration:
30 Magnificent Sites Using HTML5 at their Core – A showcase of fully functioning websites that are based on HTML5.
25 Ultra Modern Websites Using HTML5 – A beautiful showcase of some very well designed websites using HTML5 and CSS3.
Beautiful HTML5 Website Showcase – Another showcase of websites that are already using HTML5 and CSS3.
Resources:
- HTML5 and CSS3 Templates
- Sublime HTML5 Video Player
- Projekktor HTML5 Video Player
- Video for Everybody!
- HTML5 Media Library
- HTML5 Media on Google Code
More Articles:
- HTML5 Basics by DesignShack
- Wikipedia – HTML5
- A Marriage Made in Heaven? HTML5 and CSS3
- When Can I Use…?
- HTML5 Boilerplates
- Comparisons of Layout Engines
- HTML5 Canvas – The Basics
- My Top 5 HTML Coding Preferences
- Implementations in Web Browsers
- Yes! You Can Use HTML5 Today
- The Video Element in HTML5
- HTML5 + XML = XHTML5
- Semantics in HTML5
- The Future of HTML5
- HTML5 – Nav Ambiguity Resolved
- HTML5 Demos
- Preparing for HTML5 with Semantic Class Names
- Designing a Blog with HTML5
- How To Get HTML5 Working in Firefox2 and IE
- HTML5 Drag and Drop
- Building Web Pages with HTML5
- Quick Tip – Learning about HTML5 Storage
- HTML5 Readiness
- Mozilla Bespin – Use HTML5 to Build a Code Editor
- Thinking About HTML5 Canvas Accessibility
