6 HTML5 Validation Errors and How to Fix Them

All web designers should validate their site using W3C Markup Validation Service. It’s very easy to use. Simply put the link to your website in the box (or use the file upload or direct input options) and press “Check.” The service will then scan your markup to find any errors according to the doctype you selected.

Here are a few examples of validation errors and how to fix them. Some may be specific to HTML5 but others may apply to multiple doctypes.

1. Rel Types

WordPress automatically adds rel=”category tag” to some of the links on your site. Unfortunately, the HTML5 standard has recently ruled that only registered link type extensions are allowed in rel keywords. If you want your site to validate, you need to change or remove these rel keywords!

Add this code to your functions.php file in your theme’s directory:

add_filter( 'the_category', 'add_nofollow_cat' ); 
function add_nofollow_cat( $text ) {
$text = str_replace('rel="category tag"', "", $text); return $text;
}

Code Source

This will replace rel=”category tag” with rel=”nofollow”.

2. Lightbox

If you use Lightbox your code will not validate for HTML5. In order to trigger the lightbox effect you have to embed rel=”lightbox” into your link. See the problem? It’s the same issue with rel keywords as above, but the solution is a little different.

Here, the solution is to replace “rel” with “class”. So when you want to trigger lightbox, use this code:

<a href="images/image-1.jpg" class="lightbox" title="my caption">image #1</a>

Notice how rel=”lightbox” has been changed to class=”lightbox”. Unfortunately this is only half of the job. We also have to edit the JavaScript file to switch the trigger from “rel” to “class”.

When fixing this problem myself, I just opened up my lightbox source code, did a control+F for “rel” and replaced it with “class.” This should work perfectly fine. The solution also works with other similar add ons (such as FancyBox). For more specific FancyBox instructions you can refer to this entry from PaceToScreen.

The one problem I still have is that changing from rel to class seems to disable the grouping feature, which links images together and allows you to navigate through them by pressing the “Next” and “Previous” buttons. If you find a solution, please post it here!

UPDATE: It seems that with Lightbox v2.51 grouping now works when changing from rel to class! Special thanks to the commenters ^_^

3. StumbleUpon Badges

When adding my own social media links to my site, I noticed that the code for StumbleUpon’s badge was not validating. Here is the code they provide:

<!-- Place this tag where you want the su badge to render -->
<su:badge layout="1"></su:badge>

<!-- Place this snippet wherever appropriate --> 
 <script type="text/javascript"> 
 (function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
      li.src = 'https://platform.stumbleupon.com/1/widgets.js'; 
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
 })(); 
 </script>

Now the JavaScript is fine, but the HTML that renders the badge generates this W3C error:

Element su:badge not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

What’s the solution? Personally I was a little dumbfounded. I didn’t even know where to begin with fixing this. Luckily, my boyfriend came to the rescue! You can leave the JavaScript alone (starting at “Place this snippit wherever appropriate”) but change:

<su:badge layout="1"></su:badge>

to:

<iframe width="74" height="18" style="overflow: hidden; margin: 0pt; padding: 0pt; border: 0pt none;" src="http://www.stumbleupon.com/badge/embed/1/?url=<?php echo rawurlencode("http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']); ?>" id="iframe-stmblpn-widget-1"></iframe>

You may have to make a few adjustments (for example, to the “width” and “height” attributes) if you use a different button style. In this example I’m using the first badge (“layout 1”).

4. HTML Entities

Now this is a very common error that is not specific to HTML5, but luckily it’s very easy to fix! Many people forget to convert their special characters to their entity name. The most common un-converted symbol is easily ampersand. Instead of just typing out “&” use the following code in your webpages:

&

For a full list of symbols and their HTML entity equivalent visit W3Schools’s Entity List.

5. Self-Closing Tags

This actually only applies when using XHTML, but it’s usually a good habit to get into. XHTML demands that all tags be closed. In other doctypes it is perfectly acceptable to add a line break with:

<br>

Or display an image with:

<img src="http://www.mysite.com/myimage.jpg" alt="My Image">

However, in XHTML, these would be considered unclosed tags. How do we fix them? Like so!

<br />
<img src="http://www.mysite.com/myimage.jpg" alt="My Image" />

Other common self-closing tags include (but are not limited to) meta, input, area, and hr.

6. Facebook Open Graph

Facebook’s Open Graph protocol is an awesome tool that allows you to control the appearance of content that gets “liked” from your site on Facebook. Unfortunately, the meta syntax that makes this work does not validate in HTML5 and probably never will (here’s hoping…). This was a huge problem with my own site, as it was the only thing keeping it from validating 100% and I was annoyed that something like this was holding me back. After scouring the internet for a workaround, I finally found one!

<?php
	function is_facebook(){
		if(!(stristr($_SERVER["HTTP_USER_AGENT"],'facebook') === FALSE)) {
			return true;
		}
	}
?>
<!DOCTYPE html>
<html dir="ltr" lang="en-US"<?php if(is_facebook()){echo ' xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/"';}?>>
<head>
	<title><?php bloginfo('name'); ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<?php if(is_facebook()){ ?>
		<meta property="og:title" content="<?php single_post_title(''); ?>"/>
		<meta property="og:type" content="article"/>
		<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>"/>
		<meta property="og:url" content="http://<?php echo $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];?>"/>
		<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
		<meta property="fb:appid" content="<?=$your_fb_app_id?>"/>
	<?php }?>
</head>

Original Source (I slightly modified it)

I omitted the description field so that Facebook will pick up the website’s meta description, which is uniquely generated for each of my blog posts. This is particularly useful if you’re using a WordPress plugin such as the All in One SEO Pack.

Don’t forget you can also test how your page will appear on Facebook when “liked” using Facebook’s open graph debugger.

Unfortunately you cannot use this method if you cache your pages (unless your cache is really advanced and makes an exception for the Facebook user agent)

Have any extra tips?

What validation errors have you encountered and how did you fix them? Share here!