One thing I can’t wait for in HTML5 is the new structural tags, such as <header> and <nav>. What I didn’t know, is that with a little work you can actually use them right now. Because most browsers have support for unknown tags, you can just use them as normal. There are a couple issues, but they can be addressed with a few lines of code. The first is that all unknown elements are treated as inline, so you have to style them. The second is that unknown elements aren’t added the the DOM correctly in MSIE, but a quick document.createElement will fix that. Here’s a code snippet that shows you how to put it all together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5</title>
<style type="text/css">
section, header, footer, nav, article {
display: block;
}
</style>
<!--[if IE]>
<script type="text/javascript">
function(){
var e = ["section","header","footer","nav","article"];
var i = e.length;
while (i--) { document.createElement(e[i]) };
}();
</script>
<![endif]-->
</head>
I’ve only enabled a few basic tags. For a minified javascript file that enables them all, check out Remy Sharp’s HTML5 enabling script. You’ll also have to style all the elements you plan on using.
I haven’t tested this technique a whole lot, and my guess is it could introduce other issues (for example, some browsers would handle it in “almost standards” mode), but it’s worth playing with.
