Html5 Semantic Elements And Old Browsers

I am about to design a new layout for a webpage and wanted to take advantage of this moment to implement some html5 markup. The first thing that comes in my mind are the semantic e

Solution 1:

You can style them. You just have to run either the HTML5shiv or Modernizr. You'd also want to add some CSS to make them block by default.

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

Solution 2:

There is no way to make old versions of IE to recognize the new elements except via client-side scripting. If you decide that non-JavaScript use is ignorable, you can use some of the tools mentioned in other answers, or you can do yourself—the technique is odd, but not rocket science at all, e.g.

<script>document.createElement('nav');
 document.createElement('header');
 document.createElement('article');
 </script>

A more robust solution is to use div markup with class (or id) attribute, in addition to using the new elements, e.g.

 <nav><div="nav">...</div></nav>

and to set your styles using class (or id) selectors like .nav. This would be robust, and it would also give you the benefits of using purportedly semantic markup like nav. (No tangible benefits have ever been presented, but maybe some will emerge.)

Solution 3:

Because you're only looking for a method to style HTML5 elements, use HTML5Shiv (which is specifically designed for this purpose). Modernizr contains many more features. which you're not going to use (judging by the question).

Here's the source code, in case you're wondering: https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js

Solution 4:

You can (and should?) use them. Do make them display well in older browsers, I recommend the html5shiv.

http://code.google.com/p/html5shiv/

We used it here: Midlands Health Network