HTML 5 and the Now

Like a lot of people with websites to build now, I admit to being a little disinterested in HTML 5. Maybe because it’s the New Year there’s been an extra flurry of activity—certainly true for Bruce Lawson—around this upcoming standard. Bruce’s efforts with HTML 5 and WAI-ARIA are what finally inspired me to give it a go. Check out more HTML 5 links on my delicious account.

I’m working on a redesign of this website so why not change the code around a little to use HTML 5? After all, if you write semantic code in the first place it isn’t going to be much of a problem is it? Early impressions confirm that. Using Remy Sharp’s HTML 5 enabling script to put the new elements into the DOM for Internet Explorer it works in IE7 (I don’t have a VM with IE6 at home). Perhaps I’m being dense with the nesting or CSS or something, but I had to add a lot of negative margin-top to <aside> to get it higher up the page—it’s a design decision not to have it at the very top of the content div though by the way.

Other than that, there’s CSS3 at play and also hAtom and hCard microformats embedded, I think I’ve got hAtom right—let me know in the comments.

Take a look at the HTML 5 Test page.

Update 21 Jan 09

I’ve figured out the negative margin-top but haven’t uploaded the new example (it just needed another container to straighten up with so nothing major).

Update 25 Jan 09

I’ve uploaded the latest version of the example. I can’t wait to get the new theme finished, the longer it takes the more tired I get of looking at it (like this current design). *grin*

This entry was posted in Markup and tagged . Bookmark the permalink.

One Response to HTML 5 and the Now

  1. html5gallery says:

    Hey Karl

    This site has now been featured on

    I’m trying to spread the word about html5 to help developers learn how to implement it and make browsers add more support.



Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>