
After being asked for a bit of advice by a colleague, I decided to make a very simple starter template for creating an HTML5 page. You can download it here:
Notes
The tricky part is making sure it works in older browsers, for which I used the following two steps:
1. Normalize.css
(Click on “normalize.css” -> “Raw” to get the main CSS file.)
This makes all browsers behave the same way, including making relevant HTML5 elements into block elements. I recommend minifying the CSS to save bandwidth and time.
2. HTML5 Shim
This makes HTML5 elements styleable in old versions of Internet Explorer. Put it after all styles in <head>.
I’ve also added a viewport meta tag as follows which, in most cases, should improve the readability of the page on small screen devices.
<meta name="viewport" content="width=device-width, user-scalable=yes">
Going further
You might want to include Modernizr in your page, to enable you to detect support for newer CSS3 and JavaScript features.
For a much more full-featured template, there’s the popular HTML5 Boilerplate with a host of built-in goodies.
I’d love to hear if this is useful for you or if you have ideas for improvement – let me know in the comments below.