I’ve been meaning to convert Superposition Kitty to HTML5 for a while now, but it wasn’t until I read Mark Pilgrim’s excellent Dive Into HTML5 that I dove in (as it were). Below is how you can easily convert any existing *HTML page to HTML5:
Replace your doctype with <!DOCTYPE html>.
That’s it, you’re done. Of course, in doing just this you’re not going to be taking advantage of any of HTML5’s wondrous new features. I’m not taking advantage of any of these features at the moment either, but I did want to pave the way for implementing them in the future.
However, before we run off into the wonderful world of <header>, <footer>, and <article> tags and their ilk, we’re going to have to add a line of code to the <head> of our document to get Internet Explorer to treat them properly:
<script src="http://html5shiv.googlecode.com/svn/trunk/ html5.js"></script>
With that out of the way we can now go crazy with these new semantic elements. I’ve updated the structure of Superposition Kitty as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<header>
<nav>
</nav>
</header>
<article>
<header>
<h1>Post Title</h1>
<time datetime="" pubdate></time>
</header>
<p>Content</p>
</article>
<footer>
</footer>
</body>
</html>
This is just to give you some ideas of how to use these new semantic elements in your markup. Also, there are a couple of things you’re going to want to know if you’re using the <embed> code supplied by YouTube or Vimeo in your posts. The first is that you should add type="application/x-shockwave-flash" to the <object> elements. The second is that the <param> and <embed> elements must be closed with /> in their start tags, with no end tags (eg. </param>) allowed.
There are a few other differences in markup between previous versions of HTML and HTML5 (such as <script> and stylesheets no longer needing type=""), you’ll find a good breakdown of what you’ll need to know here.