W3C Markup Validation Service, ajbis.co.uk has passed!
I recently ran this blog’s homepage through W3C’s Markup Validation Service. There were five errors. Two of them repeating over and over again as they where in posts pushing the total errors to a scary 36! A bit of Googling revealed that they were pretty common. Below are the tweaks I added to pass with flying colours ;-).
1. Profile attribute is obsolete
The profile attribute on the head element is obsolete. To declare which meta terms are used in the document, instead register the names as meta extensions. To trigger specific UA behaviors, use a link element instead.
That’s this bit…
<head profile="http://gmpg.org/xfn/11">
The WordPress Codex explains what XFN is about and why it is included here. In short it helps define relationships between your blog and the links you use. The suggested link tag would look like this…
<link rel="profile" href="http://gmpg.org/xfn/11" />
Adding rel attributes to links however comes with rules in HTML 5. I have decided to exclude the XFN profile and avoid any questionable rel values being added to the site. Maybe I’ll add it back in later once I’ researched XFN and know I can fully control the relationships. Either way I have a custom header PHP file in my child theme and have replaced the default thematic_head_profile with ajbis_head_profile to write in the opening head tag.
function ajbis_head_profile()
{
$content = '<head>' . "\n";
echo apply_filters('ajbis_head_profile', $content );
}
2. Bad value on meta tag
Bad value X-UA-Compatible for attribute http-equiv on element meta.
This line of code is part of HTML5 Boilerplate.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
What is ‘X-UA-Compatible’ anyway? Well it’s there to tell Internet Explorer how to render the page. There’s some great documentation on this over at MSDN. If you are really interested then I’ recommend reading Defining Document Compatibility.
This meta tag can be removed and the X-UA-Compatible header placed in your root level .htacess. Add the following:
Header set X-UA-Compatible "IE=edge,chrome=1"
3. Datetime value on time tag
Ten errors. One for each post. Here the first one listed in the validation output. Bad value 2012-08-17T17:52:39+0100 for attribute datetime on element time: The literal did not satisfy the date format. The literal did not satisfy the datetime with timezone format. The literal did not satisfy the date or time format.
Lots of words for such a little error ;-). Thematic’s thematic_time_title includes seconds (Marked in bold below).
<time datetime="2012-08-17T17:52:39+0100">17th August, 2012 </time>
A quick read at the WordPress Codex ‘Formatting Date and Time’ and you’ find the required format. That would be ISO 8601. I have already added childtheme_override_postheader to create my HTML 5 friendly date and category strip in the header. All I had to do was change the format string passed to get_the_time.
…
echo '<h4><time datetime="' . get_the_time('c') . '">';
echo thematic_postmeta_entrydate();
echo ' </time><span>» ' . get_the_category_list(', ') . '</span></h4>' . "\n";
…
4. Keyword category is not registered
Bad value category tag for attribute rel on element a: Keyword category is not registered. Here’s an example.
<a href="http://www.ajbis.co.uk/category/designer/" title="View all posts in Designer" rel="category tag">Designer</a>
My WordPress loop adds a list of categories associated with a post (that’s pretty standard). Each link has a rel attribute of "category tag". The rel attribute in HTML 4 can be anything. It’s just there to help give a little context. W3C School defines rel as “The relationship between the current document and the linked document.” HTML 5 has a bunch of proposed acceptable values. Category is not one of them :-(.
I’ve added a filter to my child-theme’s functions.php that replaces all instances of "category tag" in the_category.
function rel_cat_fix($content) {
$content = str_replace('rel="category tag"', 'rel="tag"', $content);
return $content;
}
add_filter('the_category','rel_cat_fix');
5. Keyword generator is not registered
Bad value generator for attribute rel on element a: Keyword generator is not registered.
This is another unlisted rel option. This time in the footer. Yep. You guessed it, “Powered by WordPress.”
<a class="wp-link" href="http://WordPress.org/" title="WordPress" rel="generator">WordPress</a>
The quick solution here was to create a new shortcode and replace the [wp-link] in the ‘Text in Footer’ box found under Appearance > Theme Options. Like so…
Powered by [html5_wp_link]. Built on the [theme-link].
The shortcode was added my Thematic child-theme’s functions.php. In this instance I’ve swapped the offending keyword generator for author.
function html5_wp_link_func($atts)
{
return '<a class="wp-link" href="http://WordPress.org/" title="WordPress" rel="author">WordPress</a>';
}
add_shortcode('html5_wp_link', 'html5_wp_link_func');
Now that the homepage is valid HTML 5 I can check out the other pages. I’m sure there’s a few more suspect rel values floating around (Like trackback!). Remember that the specifications for HTML 5 are not finalised and subject to change (We’ll at least not at the time I wrote this). Fab if anyone finds this post useful :-).