Validation HTML rel标记

我正在尝试用w3c验证我的HTML5文档。我将fancybox jQuery插件用于简单的灯箱和图像库。为了区分每个图像库，我使用了

rel

标记

当我验证我的页面时，出现以下错误：

元素a上属性rel的错误值库：不是绝对IRI。字符串库不是已注册的关键字或绝对URL

这是我的密码：

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

---

是否有更好的标签可以使用并获得相同的结果？谢谢

您可以为每个库添加一个类：

class=“fancybox gallery1”

我建议在这里使用

数据

-family属性，如下所示：

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

。。。因为这种类型的属性是专门为将一些数据附加到DOM元素而设计的。在我看来，它比使用

类

更具语义

您可以使用

$（'some selector'）.data（'gallery'）

语法轻松访问这些值

至于

rel

属性，它在HTML5中看起来像是被限制在预定义的集合中，用于定义文档之间更高级的关系。

<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'，'datagallery'）.fancybox（）

谢谢：）这对我帮助很大。太好了，谢谢！我不得不更改我正在使用的jcarousel插件的“rel”代码，但在那之后，它就像一个符咒！我使用数据幻灯片是为了我的特定目的。请对您的答案发表评论。