HTML5 Browser Support Tips

Of course a big question is can and should you use these tags now. What kind of support exists in browsers for these new semantic tags?

Not all browsers are supporting these tags, however you can still use them today. Most browsers not named Internet Explorer allow you to create any element you like and let you style those elements how you want. They simply won’t give those tags any default styling.

If we consider all of the new structural tags they’re meant to act as block level elements so all we need to do is add the following:

1
2
3

section, article, header, footer, nav, aside {
    display: block;
}

Doing the above will keep your layout from breaking. You can then add any additional styles you’d like for your design. Browsers may not understand the additional semantic meaning of these tags, but so what.

Other machines that do understand the semantics will get that additional meaning and browsers will see these tags similar to how they see a div (without default styling).

IE8 and below won’t recognize the new tags. However IE will recognize new elements created in Javascript so we can create the new tags.

1

document.createElement('section');

You would do the same for each of the new elements or better use a conditional comment to link to Remy Sharp’s html5 shiv which will create them for you.

1
2
3

<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Modernizer also include’s the html5 shiv so if you use Modernizer you don’t need to link to the html5 shiv as well.

The above css and javascript will cover most everyone, though not people using IE6–8 with Javascript disabled. Generally speaking that’s a small % of people. Depending on the audience of your site it may not be an issue for you. There’s also a workaround for IE with scripting disabled.

Know though that even those people will still see your content. They may not see the styles you apply to the tags and they may not get the extra semantics, but your content will still be there. whether or not that’s acceptable is up to you.