So, I can use this now?
Actually, yes, with a few extra steps. And it will work in all modern browsers. It can even work in IE6. There are only a few little quirks we need to get past if we’re going to start using this today.
First, because most browsers don’t understand the new HTML5 doctype, they don’t know about these new tags in HTML5. Fortunately, due to the flexibility of browsers, they deal well with unknown tags. The only issue here is unknown tags have no default style, and are treated as inline tags. These new HTML5 tags are structural, and should obviously be block level elements. So, when we style them with CSS, we need to be sure to include display:block; in our attribute/value pairs.
Include this simple extra piece of CSS, and these new tags are immediately usable. Starting today. And of course, once HTML5 is more widely supported, the superfluous display:block; can be removed, as it will be included in the browser default styles.
Supporting IE
There is one more issue if you require IE support. Turns out that the IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. Well, that’s no good. Fortunately, IE just needs a good swift kick with the help of a very simple bit of JavaScript. All we need to do to kick start IE is to create a DOM node with JavaScript for each of the new tags, and suddenly IE will apply styles to the new tags with no problem. The code will look something like this, and can be placed directly in the head of our document, or the contents of the script tag placed into an external file and included.
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
</script>
Before we leave this code, there’s one thing to mention about the script tag in HTML5. HTML5 will assume type="text/javascript" on any script element, so it need not be included. Once again, making things simple.
Wrapping Up
So we can begin, right now, to structure our documents using the new tags provided in HTML5. With a few simple tricks, they’ll work today, and be compatible in the future. So next time you start a new site, consider going with HTML5, and give your markup a little more defined structure.
In the climactic final battle of Star Wars, Luke is forced to make a choice, and it all revolves around usability. He has to hit the Death Star's ventilation shaft with a proton torpedo with pinpoint accuracy, and he soons discovers that his X-Wing targeting computer just isn't right for the job. Sure, some people think it was all about Luke discovering the Force, but I think he was really wondering why he lived in a culture that had somehow invented hyperspace travel and yet had never gotten around to developing a CGA graphics card. In fairness, maybe it was just the best the rebels could find on short notice.
