… becomes:

There are also instances on lines 32, 101 and 124. Opening some of the other pages in the theme, for example single.php, and making the same change is worthwhile. Thus, line 22 in single.php would change from…

… to:

So far, so good. These are simple changes, but they already serve to overhaul the semantics of the website.

Time and Date

According to the HTML5 spec:

The element either represents a time on a 24-hour clock, or a precise date on the proleptic Gregorian calendar, optionally with a time and a time-zone offset.

This means we can give the date and time of an article’s publication more context with HTML5’s tag. Look at the code that WordPress generates:

rel="bookmark">October 17, 2008

We can add meaning to our mark-up by transposing this to:

rel="bookmark"> pubdate>October 17, 2008

This time is now machine-readable, and the browser can now interact with the date in many ways should we so wish. I’ve also added the boolean attribute pubdate, which designates this as the date on which the article or content was published.

Time in the datetime attribute is optional, but because WordPress includes it when you post an article, we can too. Implementing this in TwentyTen requires us to dig a little deeper. In loop.php, the following function on or around line 65 calls for the date to be included:

To make our HTML5 changes, let’s head over to /wp-content/themes/twentyten/ and open functions.php. On or around line 441, you’ll see this:

function twentyten_posted_on() {
printf( __( 'Posted on %2$s by %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '%3$s',
get_permalink(),
esc_attr( get_the_time() ),
get_the_date()
),

If you don’t know what that means, don’t worry. We’re focusing on the sprintf function, which basically takes a string and inserts the variables that are returned by the three functions listed: that is, get_permanlink(), get_the_time() and get_the_date() are inserted into %1$s, %2$s and %3$s, respectively.

We need to change how the date is formatted, so we’ll have to add a fourth function: get_the_date('c'). WordPress will then return the date in Coordinated Universal Time (UTC) format, which is exactly what the element requires. Our finished code looks like this:

printf( __( 'Posted on %2$s by %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( ' pubdate>%3$s',
get_permalink(),
get_the_date('c'),
get_the_date()
),

I’ve included get_the_date() twice because we need two different formats: one for the element and one that’s displayed to the user. I’ve also removed title="[time published]" because that information is already included in the element.

For more details on WordPress’ date and time functions, check out:

• Function Reference/get the time,
• Formatting Date and Time.

Figures

A figure—for our purposes at least—is a piece of media that you upload in WordPress to embed in a post. The most obvious example would be an image, but it could be a video, too, of course. WordPress 3 is helpful enough to add captions to images when you first import the images, but it doesn’t display those captions using the new HTML5

The spec defines

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

And it defines

The figcaption element represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any.

Currently an image with a caption is rendered like this:

src="http://wpdotorg.files.wordpress.com/2008/11/boat.jpg"
title="Boat" width="435" height="288" />

Boat

A WordPress image with a caption.

Changing this HTML to include HTML5 elements requires us to first look at media.php in the /wp-includes/ directory, where this code is generated. On or around line 739, you’ll find:

return '

';

To upgrade this to HTML5, we need to define a new function that outputs our

add_shortcode('wp_caption', 'twentyten_img_caption_shortcode');
add_shortcode('caption', 'twentyten_img_caption_shortcode');

function twentyten_img_caption_shortcode($attr, $content = null) {

extract(shortcode_atts(array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
return $content;

if ( $id ) $idtag = 'id="' . esc_attr($id) . '" ';

return '

First, we point the shortcodes for wp-caption and caption to our new function twentyten_img_caption_shortcode(). Then, we simply copy the original function from media.php, and change the last few lines to include our

alt="Screenshot" width="435" height="288" aria-describedby="figcaption_attachment_64">

The Comments Form

One of the biggest improvements introduced in HTML5 is how form fields work and respond to user input. We can take advantage of these changes by using HTML5 form elements in the default WordPress comments form in three ways:

1. We can set the text-input type to email and url for the relevant fields. This not only more accurately describes the input field, but also adds better keyboard functionality for the iPhone, for example.
2. We can add the boolean attribute required to our required form fields. This goes beyond WAI-ARIA’s aria-required='true' because it invokes the browser’s own required behavior.
3. We can add placeholder text to our form fields, a popular JavaScript method that is now handled in-browser. Placeholder text allows you to go into more detail about what information is required than a form label generally allows.

Before adding HTML, a typical comment input field might look like this:

Email *
size="30" aria-required='true' />

After our HTML5 changes, it would look like this:

Email *
size="30" aria-required='true'
placeholder="How can we reach you?" required />

To make these improvements in the code, we need to do two things. First, we need to change the HTML for the default fields (name, email address and website URL), and then we need to change it for the comment’s . We can achieve both of these changes with additional filters and custom functions.

To change the HTML for the default form fields, we need to add the following filter to the bottom of functions.php:

add_filter('comment_form_default_fields', 'twentytenfive_comments');

And then we have to create our custom function twentytenfive_comments() to change how these fields are displayed. We can do so by creating an array containing our new form fields and then returning it to this filter. Here’s the function:

function twentytenfive_comments() {

$req = get_option('require_name_email');

$fields = array(
'author' => '

' . '' . __( 'Name' ) . ' ' . ( $req ? '*' : '' ) .
'',

'email' => '

' . __( 'Email' ) . ' ' . ( $req ? '*' : '' ) .
'',

'url' => '

' . __( 'Website' ) . '' .
'

'

);
return $fields;
}

You can see here that each element in the form has a name in the array(): author, email and url. We then type in our custom code, which contains the new HTML5 form attributes. We have added placeholder text to each of the elements and, where required, added the boolean required attribute (and we need to check if the admin has made these fields required using the get_option() function). We’ve also added the correct input type to the inputs for author, email address and website URL.

Finally, we need to add some HTML5 to the , which is home to the user’s comments. We have to use another filter here, also in functions.php:

add_filter('comment_form_field_comment', 'twentytenfive_commentfield');

We follow this with another custom function:

function twentytenfive_commentfield() {

$commentArea = '

' . _x( 'Comment', 'noun' ) . '

';

return $commentArea;

}

This is more or less the same as the default , except with placeholder and required attributes.

You can control exactly which fields appear in your form with these two filters, so feel free to add more if you want to collect more information.

Although relatively simple, these changes to the comment form provide additional (and useful!) features to users with latest-generation browsers. Look in Opera, Chrome (which doesn’t yet support required) or Firefox 4 to see the results.

Header, Navigation and Footer

We finally get around to inserting the new

It doesn’t take a genius to see that we can easily make this HTML5-ready by changing some of those divs to include

You can see that we’ve left the WAI-ARIA role of navigation assigned to the nav element—simply to offer the broadest possible support to all browsers and screen readers.

I have replaced the #masthead div with a

While we’re editing the header, we can introduce the new

id="site-title">



>

We can edit this to include the