Adding Even More HTML5 Goodness to Codestore
I used to pride myself on keeping this site up there on the bleeding edge of best web design practice. That hasn't been the case as much lately though and this site's backend HTML has stagnated for years. It keeps up with things but generally lags behind.
In trying to catch up with the pace I posted on Friday about how I'd funked-up the search box. Not wanting to stop there I've now taken it a little further and converted as much of the site's markup to HTML5 as I dare.
The general structure of a page is now like this:
<!doctype html> <body> <div id="container"> <header> <nav> <ul></ul> </nav> </header> <section id="side"> </section> <section id="content"> <article></article> <article></article> <article></article> <article></article> </section> <footer> <nav> <ul></ul> </nav> </footer> </div>
</body>
If you're left wondering what all these new HTML elements are then worry not - they're simply new HTML5 elements. Most of them are simply used where you'd normally use a <div> but they give the markup more semantic meaning.
I now feel a bit better about the state of site.
Backwards Compatibility
Nothing's ever simple is it. To make sure these changes were backwards compatible I had to do two things.
First I had to add the HTML5Shiv trick, which uses conditional comments to load an extra JavaScript file for IE8 or less:
<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Can't say I'm over the moon that my site now needs JavaScript to make the CSS work, and I've always liked that fact that one code-base rules all browsers, but I don't want to be held back by old browsers.
At some point in the future I'll remove the above Shim trick and remove "support" for <IE8.
The other thing I had to do was add the following CSS to make sure older browsers like Firefox 3.6 understood what these new elements were.
article, aside, canvas, details,
figcaption, figure, footer, header,
hgroup, nav, section, summary, video {
display: block;
}
All done.
Skip to the 
You can subscribe to an individual
Doing all this is next on my list. I'm interested in your reasoning to use <section id="side"> over the <aside> element? Guess the next step is making blog comments 'sub' articles of the main article? Depends how far you want to go I guess.
Reply
Could be wrong, but, as I understand it, I'm not sure using an aside for my sidebar would be semantically correct.
The aside is meant to be for related parts to an article that don't belong inline. That's how I read it anyway.
Reply
Show the rest of this thread
You might want to check out this site for proper use of sections. http://html5doctor.com/avoiding-common-html5-mistakes/
Reply
Ouch. Right. Back to the drawing board.
Reply
Show the rest of this thread
For fun I fired up IE6, turned off javascript, then pointed it to codestore.net. Wow! That's ugly!
Thanks for blazing this trail. And Tanny, thanks for the link.
Reply
Ugly, but functional, which is all you can hope for I guess if you're still using IE6.
Reply
Show the rest of this thread
You need JavaScript to tell IE to create the HTML5 elements.
Reply
This is an easy read and gives you some good information on HTML5.
http://www.abookapart.com/products/html5-for-web-designers
Reply