Authors using HTML5 Doctype, revalidate and be surprised

Sorry guys if this was already posted on the forum, I couldn’t find it.

A potential Buyer of my most recent theme (2 months old) had a pre-purchase concern regarding the validation of the theme in W3C , it was displaying validation errors. You can imagine my surprise since 2 months ago when I submitted the theme the validation errors weren’t there. I decided to search for the validation errors but couldn’t find anything of interest, just this post.

In my theme (and I believe in most theme this is happening), these are the errors:

<meta name="search" content="search..." />

I sometimes use this approach in order to get PHP values for javascript use (I believe you are familiar with this approach).

rel="lightbox"

It seems the rel attribute now has limited valid values for a correct validation so lightbox plugins that use the rel attribute, like prettyphoto for example, will have validation problems.

This also happens with the rel=”canonical” markup generated by WordPress.

If you take a look at this post dated from February 2011 you can see the default Tweentyten WordPress theme validates correctly with the HTML5 Doctype. Try and validate it now and you can see the same errors: check errors

Would love to hear your thoughts about this.

Cheers

I was validating a new theme this morning and noticed the same thing. The index and canonical <link /> tags and the rel attribute on category links generated by WordPress no longer validate.

Yes,

all the custom tag attributes like rel, to be validated need to be in the form: data-rel (data-attribute_name).

This sucks because WordPress too prints rel attributes within the header…

In any case, I think that this kind of validation errors are just ridicolous… validation is needed to check more important things…

I think that to protect authors from buyers complaints, staff should make a list of “accepted validation errors” that don’t create any problem to the themes.

We cannot change how plugins like prettyPhoto work just for these errors, because otherwise if a buyer updates his plugins then they wuldn’t work with the new validated attributes (if we edit them to data-rel).

I personally find validation pointless, if it displays correctly thats all that matters, but I still do it because it is required for some reason.

I’m glad you brought this up. I had trouble getting my latest HTML template validated because the hover navigation was using ‘rel’ for the background hex color effect I’m using.

I remember when I ran it through HTML5 validation and nearly blew a gasket. But there are workarounds to it.

One thing you can do with lightbox is just make it a class and change ‘rel’ in the function to ‘class’ as well.

This guy has a nice little write up on it.

i have noticed this too…So are we supposed just to ignore it and continue like we did before or what?that’s my question? : )

I’ll bet you could replace all your “rel” attributes with “data-rel” in the code then using jQuery in your footer swap them:

jQuery('*').each( function() {
    jQuery(this).attr('rel',  jQuery(this).attr('data-rel');
});

This way the page validates but the rel attribute is still there for all the scripts that rely on it. That won’t fix the WP or other CMS core code that have these attributes but those will likely be updated soon.

Yeah just ignore it ;]

Just noticed a missing “)” in the previous code:

jQuery('*').each( function() {
    jQuery(this).attr('rel',  jQuery(this).attr('data-rel'));
});

There, I think that will work.

Parallelus said
Just noticed a missing “)” in the previous code:

jQuery('*').each( function() {
    jQuery(this).attr('rel',  jQuery(this).attr('data-rel'));
});

There, I think that will work.

The ’*’ selector is very heavy. It selects all elements!

jQuery('[rel]').each( function() {
   var $t = jQuery(this);
    $t.attr('rel',  $t.data('rel'));
});