Question

I am trying to validate my HTML5 document with the W3C validation service. 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 way to achieve this result?

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.