415 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 4-5 years
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Referred between 10 and 49 users
  • Portugal
unisphere says

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

374 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 3-4 years
  • United Kingdom
  • Referred between 100 and 199 users
  • Bought between 1 and 9 items
  • Exclusive Author
EugeneO says

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.

3256 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Beta Tester
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
+4 more
ParkerAndKent says

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).

2509 posts Put a Donk On It
  • Exclusive Author
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Attended a Community Meetup
  • Referred between 100 and 199 users
  • Contributed a Tutorial to a Tuts+ Site
+5 more
ThemeProvince says

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.

1947 posts Do the Needful
  • Envato Staff
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Has been a member for 3-4 years
  • United States
  • Support Staff
  • Author had a Free File of the Month
  • Microlancer Beta Tester
  • Contributed a Blog Post
+7 more
JamiGibbs Staff says

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.

327 posts just a random dude...
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Europe
  • Exclusive Author
  • Has been a member for 3-4 years
  • Microlancer Beta Tester
  • Referred between 1 and 9 users
+1 more
trendyWebStar says

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? : )

991 posts Best-dressed man at PressNomics 2013
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
  • Power Elite Author
+4 more
Parallelus says

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.

356 posts
  • Interviewed on the Envato Notes blog
  • Beta Tester
  • Microlancer Beta Tester
  • Has been a member for 3-4 years
  • Referred between 1 and 9 users
  • Bought between 50 and 99 items
  • Sold between 100 and 1 000 dollars
  • Exclusive Author
  • United Kingdom
FutureSight says

Yeah just ignore it ;]

991 posts Best-dressed man at PressNomics 2013
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
  • Power Elite Author
+4 more
Parallelus says

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.

2001 posts
  • Elite Author
  • Author had a Free File of the Month
  • Has been a member for 4-5 years
  • Austria
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Microlancer Beta Tester
+3 more
revaxarts says

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'));
});
should be a little bit faster (requires jQuery 1.4.4+)
by
by
by
by
by
by