Converting from XHTML to HTML5
I decided a few weeks ago that I wanted to convert my site from it’s XHTML format to an HTML5 model. This site as of this writing uses the Desk Mess Wordpress theme. I wanted to continue to use this theme as I really like the layout and feel, and thought it would be a great benefit to have this converted to HTML5.
I originally planned this to be an HTML5 markup with CSS3 layout properties using the new CSS Tables property. After adding in all the HTML5 markup and then styling using CSS Tables, I decided there was no benefit for the user or from a usability standpoint. In fact, I believe that CSS Tables go against some standard accessibility practices, but I’ll talk about that in another post later. In the end I ended up going with nice and reliable floats.
Semantic Markup
One of the biggest changes of the HTML5 markup was my ability to be able to markup data semantically. Using tags like <header>, <nav>, <aside>, <section> and <article> we can now properly define what areas of our website’s sections are intended for. The website skeleton now has the following structure:
<!doctype html> <html> <head> <title>Chris Blackwell's Domain</title> </head> <body> <header> <h1>Chris Blackwell's Domain</h1> </header> <nav> <!-- Navigation --> </nav> <section> <article> <!-- Blog Post or Static Page --> <article> <!-- Comments on blog post --> </article> </article> </section> <aside> <!-- Sidebar --> </aside> <footer> <!-- Footer --> </footer> </body> </html>
As you can see I have embedded the <article> tags for the comments within the <article> tag for the post. This semantic can tell a computer or search engine that these comments on the page are in reference to the article above and not random text. It gives the comments some context and allows for cross referencing. I could have taken this one step furthur and embedded <header> and <footer> within the <article> tags for the article. I will most likely revisit this in the near future and add in that markup as well. The possibilities for this are endless and I’m really excited to see what search engines or other applications learn to do with this new ability.
I’ve also added in a the <time> property so that I can markup the post date and time as well as the timestamps for the comments.
The <time> property for the post timestamp looks like the following:
<time datetime="<?php the_date('Y-m-d') ?>T<?php the_time('G:i'); ?>-5:00">
<?php the_time('M j, Y') ?>
</time>
For the comments we just change the PHP functions to call the comment_date and comment_time:
<time datetime="<?php comment_date('Y-m-d') ?>T<?php comment_time('G:i'); ?>-5:00">
<?php comment_date('M j, Y') ?> at <?php comment_time() ?>
</time>
Changes to H1 tags
Another change I wanted to make was the way headings were represented throughout the site. Your main homepage should have the title marked up in an <h1> tag. However, on your single post pages, the post title should be marked up using an <h1> tag and your blog title can be on a lower hierarchical level. Since the website title tag is called on the header.php file, I needed a way to have to appear as a <h1> if on the home page, but just a <p> if on another page. I did this using a simple php if statement:
<?php
// Choose the blog title code
if ( is_home() ) { ?>
<h1 class="blogname"><a href="<?php echo get_option('home'); ?>"
title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<p class="slogan"><?php bloginfo('description'); ?></p>
<?php
} else { ?>
<p class="blogname"><a href="<?php echo get_option('home'); ?>"
title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p>
<p class="slogan"><?php bloginfo('description'); ?></p>
<?php
}
?>
Thank you again to the great guys at Laptop Geek for creating this theme and giving me the chance to modify it. It has truly been a fun and rewarding experience and I release the source back for everyone to download, use, modify and have fun with.
Comments
Leave a Reply
Thanks for this post. I’m going to convert my old xHTML 2 code in my blog to a new HTML.
Hope this will be valid and clear.
Do you really think we should use new HTML5 at all?
Nice site and an interesting read – are you having fun with it? I like what you are doing here.
I had a lot of fun with this. I’m now looking into how reliable the JavaScript hook I use to make it work with Internet Explorer is.