Having read John Resig’s “HTML5 Shiv” article and Remy Sharp’s “HTML5 enabling script”, it felt like the right time to begin the full fledged migration from XHTML to a cross browser compatible HTML5 blog. All in all the process of updating the templates was painless, taking about an hour or so to modify the Wordpress Sandbox theme.
To enable IE6 and IE7 support for new HTML5 tags, which are not naturally styled, some JavaScript is necessary. As per the ‘shiv’ article, Remy Sharp has a small script that creates DOM elements, one for each type of new HTML5 tag, the simple act of doing so leads Internet Explorer to apply styles to said tags. I slightly modified the existing script to add the recently proposed hgroup.
(function(){
if(!/*@cc_on!@*/0) return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,
eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,
progress,section,time,video".split(','),i=0,length=e.length;
while(i<length){
document.createElement(e[i++])
}
})();
Even though these tags accept style they don’t come with their default renderings. For that we need a bit of CSS to make block elements behave as they should.
article, aside, dialog, footer, header, section, footer, nav, figure {
display: block;
}
I’ve also updated the Eric Meyer reset script, removing now deprecated HTML 4 tags and applying reset to the new elements, so they do not unexpectedly inherit padding, margin, etc. in the future. These changes are not yet exhaustive.
Moving onto the page’s actual markup, the new DOCTYPE and character encoding settings are remarkably simple. Standards based web development is getting easier. For browsers that do not support HTML5, the new DOCTYPE still triggers standards mode. The xmlns HTML attribute is no longer necessary and the profile attribute has been dropped.
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8" /> <title>FofR Online</title>
The header section has been placed in the appropriate <header> tags, and similarly with the footer. I’d hoped to include the ‘About Me’ section within this, but as part of the specification you cannot include headings within a <footer> element.
Each of the posts comes wrapped in an <article> tag, i.e. an independent element with content that could standalone. Within are the respective <header> (containing title and date) and <footer> (containing meta links) elements. Technically the meta links could be marked as <nav>, but the former is more fitting and still acceptable use.
The date makes use of HTML5’s <time> element, with a datetime attribute that gives the precise posting time, including timezone offset.
The previous and next links that follow the article can comfortably sit within a <nav> tag. Similarly, my sidebar region is predominantly navigation based with lists of archives and categories, it’s been marked as such.
<article id="post-67" class=""> <header> <h2 class="entry-title"><a href="" title="" rel="bookmark">POST TITLE</a></h2> <div class="entry-date"> <time datetime="2009-04-30T15:54:28-07:00" class="published" title="2009-04-30T15:54:28-07:00">April 30, 2009 – 3:54 pm</time> </div> </header> <div class="entry-content"> POST </div> <footer class="entry-meta"> META LINKS </footer> </article> <nav id="nav-below" class="navigation clearfix"> <div class="nav-previous"></div> <div class="nav-next"></div> </nav>
One avenue I should explore is the inclusion of the <section> tag, which I’d like to break up individual posts, probably by splitting the content at level three headings downwards; thereby becoming the header of each new section.
It’ll be a while before the real benefits of HTML5 can be fully appreciated by everyone, but it feels good to make a start, however small that step may be.
4 Comments
Great post. I’ve been working on porting a site to HTML5 in the past few weeks and have found it a fun challenge. I hadn’t even thought about including headers and footers within other elements. Seems like an interesting approach, where it makes sense.
You might want to note that the correct syntax for the doctype doesn’t include a ‘“‘. The one you have now actually triggers quirks mode in at least Firefox and Opera.
Good spot, fixed.
Good article. You got me started on HTML 5 conversion of my theme. It took me a while to do it. The base structure is similar to yours. The sad part is that while the HTML validates 100%, to make it work in all browsers I still need to use a lot of IE6 hacks, and this turns into invalid CSS. Anyway, if you are interested here is my Wordpress HTML 5 experience: adopting my blog to 5 part 2 the structure