By now everyone has heard of HTML5. Pretty exciting isn't it… also a little daunting. Of course, there are two sides to the excitement, most developers love it, others feel it has come too soon, and we are not quite ready for it. Whatever your feelings are on this issue, it is here, so let’s work with it.
In this post, we have collected as many helpful resources as we could on HTML5. As can be expected, the volume of tutorials and resources are a little thin on the ground at the moment, but the tutorials are all of a high standard, and the resources are truly indispensable. Just before you get started with the tutorials, here some free HTML5 web templates for you.
Introduction to HTML5 Video
This is an educational “Introduction to HTML5” video that goes over many of the major aspects of this new standard, and the video is full of demos and sample source code.
HTML5 is the next version of the web markup standard. CSS3 is the next generation styling language. Together, they will make the web a great experience.
CSS Code Structure for HTML5: Some Useful Guidelines
In this post, they offer some useful guidelines about how to implement a well-organized CSS code structure in view of the introduction of the HTML5 markup language. They are not general rules but simple suggestions that you can follow in order to improve the readability, manageability, and general organization of CSS code.
HTML5 & CSS3: The Techniques You’ll Soon Be Using
In this tutorial, you are going to build a blog page using next-generation techniques from HTML5 and CSS 3. The tutorial aims to demonstrate how you will be building websites when the specifications are finalized, and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.
Have a Field Day with HTML5 Forms
In this indepth HTML5 tutorial you’re going to take a look at how to style a beautiful and simple payment HTML5 form using some advanced CSS and latest CSS3 techniques. You are also going to use some of HTML5’s new input types and attributes to create more meaningful fields and use less unnecessary classes and ids.
Coding an HTML5 Layout From Scratch
You will learn how to create a very basic web layout which covers most of the elements you can start to code using HTML5. Basically, you will be building the page’s name, and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.
HTML5 Canvas – The Basics
Creating a canvas context on your page is as simple as adding the
<canvas> element to your HTML, follow this tutorial to find out how to do this.
Designing a Blog with HTML5
HTML5: The Basics
This is the first article in a four-part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition.
Dive Into HTML5
Dive Into HTML5 is by no means complete, it is an ongoing manual that seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards and has been written by Mark Pilgrim.
HTML5 Doctor, helping you implement HTML5 today
The HTML5 Doctor is quite possibly the best HTML5 currently available. They publish articles relating to HTML5 and it’s semantics and how to use them, here and now. They also invite questions, in the form of ‘Ask the doctor’ to help answer people’s queries and questions. Answers will be posted in the form of articles for all to learn from.
How to use Modernizr.
In this short tutorial, from you will learn how to apply, step-by-step, Modernizr to maximum effect on your sites.
When can I use…
“When can I use…” is a service that shows tables of a variety of current and upcoming web technologies (CSS3, HTML5…). It covers all the main browsers (Internet Explorer, Firefox, Safari, Opera, and Chrome), as well as different versions from different eras (the past, present, near and far future).
Web Designers' Browser Support Checklist
This great resource displays the current browser support for HTML5 (including Web Forms 2.0) and CSS3 (including CSS3 selectors).
HTML5 Cheat Sheet (PDF)
This is a handy printable HTML5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.
HTML5 Visual Cheat Sheet by Woork
This HTML5 cheatsheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style of this cheat sheet allows you to find at a glance everything you are looking for.
HTML5 Pocket Book
HTML5 Pocket Book is a quick and printable pocket reference for HTML5.
The HTML5 Glossary is a comprehensive references of elements that are new or have been redefined in HTML5.
HTML5 Gallery has two primary aims, the first is to showcase sites that use html5 for markup, so that you can see how people have interpreted the specification and how it has been implemented. The secondary aim is to help people learn about html5 and how it should be used.
HTML5 Demos and Examples
These HTML5 experiments and demos have been hacked together by Remy Sharp, that demonstrate the power of HTML5. Make sure you are using a browser that supports these features.
- HTML5 and The Future of the Web by Tim Wright.
- A Marriage Made in Heaven? HTML5 and CSS3 by Frederick Townes.
- The Power of HTML5 and CSS3 by Jeff Starr.
- Semantics in HTML5 by John Allsopp from alistapart.com.
- Yes, You Can Use HTML5 Today by Bruce Lawson.
- Getting to Grips with the HTML5 File API by Pankaj Parashar.
- Quick Tip: The HTML5 Context Menu Attribute by Sara Vieira.
- Getting to Grips with HTML5 Browser Compatibility by Vail Joy.
- 50 Free Responsive HTML5 Web Templates
- The Do’s and Don’ts of Building HTML5 Hybrid Apps
- Guide to HTML5’s Media Tags – Audio and Video
- Why We Chose HTML5 over Native Apps
- Firefox 16: HTML5 Awesomeness And Love For Developers
- Coding the Digg v4 Layout with HTML5 and CSS3
- Getting to Grips with HTML5 Browser Compatibility
- What Else Does HTML5 Need to Defeat Flash? (Part 2)