It is probably clear in everyone’s mind that we need HTML5 we can’t go forward without something new, we can’t live off the same decade old technology forever, but still we want to support the old versions of IE, some people can’t even let go of IE 6.

When I started thinking about this, the first question that came into my mind is: why? why do we need various HTML5 technologies?

The first thing that came into my mind were: tags

We need more tags, for applications that care about the semantic structure of our pages, like search engines. We could make search engines identify our content much easier if we can tell them more precisely what semantic meaning does a tag have.

Today’s(and even yesterday’s) browsers were designed to deal with unknown tags, if a browser doesn’t know a tag, it will simply display it’s content, which is almost good, but we need to style it. Luckily it turns out that there is a hack to make even IE 6 apply stylings to undefined tags. I took a look if there are reliable implementations of this.

Here are the implementations I found:

HTML5 Reset (html5reset.org)

This project claims to be a good starting point for developers who want HTML5 tags, fair enough. I loaded it’s homepage in IE 6 and it blew up with a JavaScript error, a “null or not an object” type error that could have been easily caught. I wanted to download this to examine it further, there were 3 download options:

• The Kitchen Sink version (fully commented)
• The Kitchen Sink version (no comments)
• The Bare Bones version

Since I only want a starting point I started off with the Bare Bones version. To my surprise it didn’t have any JS files, so I wondered how they managed to tackle the styling issue that I wrote about above. To my dismay styling didn’t work in IE 6, because it missed the JS hacks required for styling to work.

Since the Bare Bones version didn’t work out I went on and tried the Kitchen Sink version, to my surprise it immediately recommended HTML5 Shiv for IE compatibility in comments, but it used Modernizr which basically provided the same solution.

Since this template had a lot of files, I looked at it’s file structure:

.
|-- [       4096]  -
|   |-- [       4096]  css
|   |   |-- [        133]  core.css
|   |   |-- [        404]  main.css
|   |   |-- [       4096]  _patches
|   |   |   |-- [        132]  mac-ie5.css
|   |   |   |-- [          0]  win-ie5.css
|   |   |   |-- [          0]  win-ie6-below.css
|   |   |   |-- [          0]  win-ie7.css
|   |   |   |-- [        117]  win-ie-all.css
|   |   |   `-- [        218]  win-ie-old.css
|   |   |-- [       4096]  _print
|   |   |   |-- [          0]  core.css
|   |   |   `-- [        128]  main.css
|   |   `-- [       1670]  reset.css
|   |-- [       4096]  img
|   `-- [       4096]  js
|-- [        807]  index.html
`-- [       1488]  license.txt

6 directories, 13 files

(Bare Bones version)

I found out that it has:

• 2 empty directories
• 4 empty CSS files
• supposed support for IE 5 and IE 5 on the mac
• awkward directory names, using “-” as a directory name
• html5reset-barebones/-/css/core.css contains only one rule
• html5reset-barebones/-/css/main.css contains only 3 imports nothing else
• html5reset-barebones/-/css/_print/main.css contains an import to an empty CSS file
• the only useful part of this whole package is html5reset-barebones/-/css/reset.css which is basically “html5doctor.com Reset Stylesheet”

In my opinion the Bare Bones package is useless, all it does is include html5doctor.com Reset Stylesheet, which I could probably do myself without having this awkward directory structure.

The Kitchen Sink version is basically the Bare Bones version, plus 2 JS files and a more complex index.html, it includes Modernizr and a JS file that captures the load event with jQuery twice and does nothing, this was probably meant to be template, but then why do the same thing twice?

Bottom line: treat HTML5 Reset only as a sample that showcases some techniques instead of a real starting point, it’s mainly Modernizr with some sample code.

HTML5 Boilerplate

This template promised a lot of IE compatibility. This template uses html5doctor.com Reset Stylesheet too, along with other CSS frameworks like YUI Reset. This template has some good patterns and examples like how to handle mobile orientation changes correctly but I wouldn’t use this as my starting point, it includes too many things like DD Belated PNG for IE6, which someone may or may not need. It basically uses Modernizr to get the job done, to be fair the author of HTML5 Boilerplate is a contributor to Modernizr.

Bottom line: it has good examples on how to accomplish various tasks but it’s too bloated to be a general template and it lacks documentation and modularity.

Modernizr(http://www.modernizr.com/)

Modernizr is a very helpful tool, both HTML5 Reset and HTML5 Boilerplate use it as a starting point. It basically detects the presence a lot of HTML5 features mostly by using tests, which is very good, it doesn’t try to provide fallbacks for missing features, the only thing it fixes is the tag styling for older IEs.

HTML5 Shiv(http://code.google.com/p/html5shiv/)

If someone only wants to fix the tag stylings in IE and does not need the full feature set of Modernizr, then HTML5 Shiv is a good tool for that.

HTML5 Reset Stylesheet(http://html5doctor.com/html-5-reset-stylesheet/)

This stylesheet is pretty good, if I would combine it with YUI Reset and get the ultimate Reset stylesheet. The only problems I have with this is that it defines default styles in a few places, which I don’t really like, because I will probably override them anyway.

Conclusions:

I personally would use either HTML5 Shiv or Modernizr with HTML5 Reset Stylesheet(both templates encourage that) with my other technique. HTML5 Reset is an overkill because it has too many conditional CSS files, no site requires that many. HTML5 Boilerplate encourages a better practice for conditional CSS by giving the body tag a class that corresponds with the IE version.

If I were to choose from the two templates I would probably go with HTML5 Boilerplate, but I would surely remove what I don’t need

There is nothing there to stop web developers from start using HTML5 tags right away for providing a more semantic web!