HTML and CSS Reference
Thus, you no longer need to rely on the head tags to do all of the ranking and outlining
of the information within your document—that task is instead handled by these new
semantically rich elements.
So, each of your elements (such as header or article ) can begin with its own h1 tag.
While it may seem strange to mirror this new coding convention in an XHTML/HTML4
document, it will nonetheless make it easier to transition your page to HTML5 later.
Finally, we close our page with a div labeled "footer" , which maps onto the HTML5
<div id="footer"> <p>© 2011 Christina Ramey</p> </div>
Now, when we are ready to switch to HTML5, it will be easy enough to change all of
these div s to their corresponding HTML5 tags, thus saving us the headache of having
to do any major restructuring of the page.
There is no mystery to this technique of mapping of HTML5 tags to XHTML/HTML4
div s. Indeed, you many not need to alter your current coding technique much, if at all.
However, once you decide on proper ID and class names that mirror HTML5 tags, it
is best to stick with that naming convention (particularly if you are coding a lot of
That way, when it does come time to translate these pages to HTML5, you won't need
to recall that you named your header "header" in one document but "main-header" in
another. It will also make it easier to do a quick find-and-replace with your text editor
across multiple documents.
Oli Studholme's HTML5 ID and class name cheat sheet at http://oli.jp/2008/html5-class