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: Web Technology