HTML5 Validation and the rel tag

Image for HTML5 Validation and the rel tag
Image for HTML5 Validation and the rel tag

I specify to my students that their sites must validate. We are using HTML5. The latest change (I don't disagree with it) is that the rel="lightbox' breaks validation. Why is this and can we fix it?

furthermore...

With XHTML is was always possible to add data types to tags and rel='lightbox' is used all over the web to deliver nice popup images and media. On this site I am using the jquery add on - called FancyBox. The problem is that this little bit of javascript magic depends upon the word 'lightbox' as a value for the attribute rel on the a tag. According to the HTML5 spec only the following values are allowed:

  • alternate
  • author
  • bookmark
  • external
  • help
  • icon
  • license
  • next
  • nofollow
  • noreferrer
  • pingback
  • prefetch
  • prev
  • search
  • sidebar
  • stylesheet
  • tag

For a further explanation see whatwg

So, what can we do?

It turns out that using the rel tag is really not essential at all. We can use the class tag with the same effect. For this site (using FancyBox) I have changed as follows:

For pages where an image is to be found change this:

rel="lightbox[group]

to this:

class="lightbox[group]

and at the head of the page, inside the javascript function, change this:

$("a[rel=lightbox[group]]")

to this

$("a[class=lightbox[group]]")

also, inside the, the javascript file you will need to change this:

"a[rel="

to this

"a[class="

EDIT: to get the gallery of images to work you also need to change this:

attr("rel")

to this:

attr("class")

Posted on 31 May around 10am

Tags:

Extra words from Diane:

Hello!  This problem with validation seems to be new.  These suggestions seem to work to some degree on a “per page” basis.  However, the slideshow function of prettyPhoto does not work with only those changes, and I do not see the code in the javascript file for the third change, so haven’t been able to check this out fully.  At any rate, recoding all of my pages is not feasible for me.  Very frustrating, as these pages passed before and are now showing errors.  :(

Posted on  06/05  at  12:11 PM

Extra words from Ana:

This works for the Colorbox script too, by changing

$(“a[rel=‘example1’]”).colorbox();

in the header to:

$(“a[class=‘example1’]”).colorbox();

Posted on  06/16  at  11:19 PM

Commenting is not available in this channel entry.