The HTML rel tag

Question

I am trying to validate my HTML5 document with the w3c. I am using the fancybox jQuery plugin for simple light boxes and image galleries. In order to differentiate between each image gallery I am using the rel tag.

When I validate my page I get the following error:

Bad value gallery for attribute rel on element a: Not an absolute IRI. The string gallery is not a registered keyword or absolute URL.

Here is my code:

<div class="portItem">
    <div class="thumbs">
        <div class="items">
        <img src="images/rsl.jpg" class="col" alt="A website for R.S.Lynch and Company"/>
        <div class="caption">
            <a class="fancybox" rel="gallery1" href="images/rs1.jpg">R.S.Lynch & Company</a>
            <div class="hidden">
            <a class="fancybox" rel="gallery1" href="images/rs2.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs3.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs4.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs5.jpg"></a>
            </div>
        </div>
        </div>
    </div>
</div>

Is there a better tag to use and get the same result? Thanks

Answer 1

I'd suggest using data-family attribute here, like this:

<a class="fancybox" data-gallery="1" href="images/rs1.jpg">R.S.Lynch & Company</a>
<a class="fancybox" data-gallery="1" href="images/rs2.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs3.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs4.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs5.jpg">...</a>

... as this type of attribute was designed specifically for attaching some data to DOM elements. It's more semantic than using class, in my opinion.

You can easily access these values with $('some selector').data('gallery') syntax.

As for rel attribute, it looks like in HTML5 it's restricted to the set of predefined attributes, and is used to define more high-level relationships between documents.

Answer 2

You could add a class for each gallery instead: class="fancybox gallery1"

Answer 3

<a class="fancybox" data-gallery="1" href="images/img1.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/img2.jpg">...</a>

$(".fancybox").attr('rel', 'data-gallery').fancybox();