Converting the WordPress Arthemia Theme to HTML5
The other day I converted the current WordPress theme of this site from XHTML Transitional 1.0 to HTML5. It was fairly easy so here’s what I did.
An XHTML 1.0 transitional website was a great place to start. I used the trusty w3c validator located at http://validator.w3.com.
First thing was to get the Doctype fixed up: I changed
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
to
<!DOCTYPE html>
and bingo, we’re recognized as HTML5 instead of XHTML. Not compliant yet though. I removed the profile attribute from my head tag as so:
<head profile=”http://gmpg.org/xfn/11″> which wasn’t serving any purpose anyway so it became
<head>
Removed a stray </link> tag from the header, added an alt tag where there was one missing, removed px from all width and height attributes and removed a frameborder tag (obsolete).
That completed the HTML5 cleanup. At this point the site validated but was not actually using any tags.
Next up adding some HTML5 semantic tags: I added the <header> and <nav> tags in the appropriate places, defined a <section role=”main”> tag for the main area of the page. Slapped in some <article> and <header> tags. The only one worth mentioned was the <time> tag which took a different format from the datetime I was using so it’s:
<time datetime=”<?php the_time(‘Y-m-d’) ?>”></time>
And lastly added a <footer> tag. In terms of the theme I touched header.php, footer.php, index.php and single.php. Easy stuff and now I’m fully geeked out on HTML5.
Hi francis, you should try this one http://www.rismaka.net/2010/06/arthemia2010-wordpress-theme-released.html
Great! thanks for sharing!