HTML5

How to be HTML5 awesome

Dabbling with HTML5? Get all the HTML5 support and resources that you need to make production-quality websites.

A great place to augment your HTML5 education is HTML5 Boilerplate by Paul Irish and Divya Manian. The site doesn't teach you how to write HTML5; it does however, bring together a huge amount of best practice advice.

HTML5 support

  • Want links to jQuery in the Google CDN, but with fallback links to your server in case the CDN server is down? Check.
  • Want iOS, Android, Opera Mobile-adaptable markup and CSS skeleton? Check.
  • Need an .htaccess file that serves HTML5 video with the right MIME types? Check.

In fact, you can think of this site as a checklist that does the work for you. Of course, like any checklist that tries to be exhaustive, you'll find some of it is redundant.

"It is quite exhaustive," Manian says, "so everyone is encouraged to look into and delete whatever they find unnecessary. In general, Boilerplate helps hugely even if you're doing HTML4 or XHTML1.1 development, but it's got a few more tricks when it comes to HTML5."

CSS Framework

There's also a useful CSS framework, including an HTML5 reset style sheet from .net columnist Richard Clark, which incorporates lots of other useful stuff such as classes for clearfix and giving content just to screen readers.

We thoroughly recommend watching developer Paul Irish's video tutorial before starting to use it at net.tutsplus.com/tutorials/html-csstechniques/ the-official-guide-to-html5-boilerplate/.

Plus there's still more to come, explains Manian. "We are working to port it to Sass/Haml, but we're primarily excited about creating a build script that will automate best practices such as minifying JavaScript/CSS, compressing PNGs, and so on."

Further reading

Josh Duck's periodic table - A visual representation of the 104 elements in the HTML5 working draft.

HTML5 test - A series of handy browser tests to check HTML5 support

HTML5 demos - HTML 5 experimentation and demos

The Best HTML sites of 2011 - A collection of outstanding examples of HTML5 usage

What other resources do you use for HTML5 development? Share them with us in the comments below and we'll add them to this support page. Thanks.

Log in with your Creative Bloq account

site stat collection