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>

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>

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.


    • avatar
    • Jon
    • Mon 23 Jan 2012 04:20 AM

    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.

    1. 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.

      Show the rest of this thread

  1. You might want to check out this site for proper use of sections. http://html5doctor.com/avoiding-common-html5-mistakes/

    1. Ouch. Right. Back to the drawing board.

      Show the rest of this thread

  2. 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.

    1. Ugly, but functional, which is all you can hope for I guess if you're still using IE6.

      Show the rest of this thread

    2. You need JavaScript to tell IE to create the HTML5 elements.

    • avatar
    • Jorge Coelho
    • Tue 24 Jan 2012 10:26 AM

    This is an easy read and gives you some good information on HTML5.


Your Comments


About This Page

Written by Jake Howlett on Mon 23 Jan 2012

Share This Page

# ( ) '


The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content