Das HTML-rel-Tag

Question

Ich versuche, mein HTML5-Dokument mit dem W3C zu validieren. Ich benutze das fancybox jQuery Plugin für einfache Leuchtkästen und Bildergalerien. Um zwischen jeder Bildergalerie zu unterscheiden, verwende ich den Tag rel.

Wenn ich meine Seite, die ich die folgende Fehlermeldung zu validieren:

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

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

Gibt es einen besseren Tag das gleiche Ergebnis zu verwenden und zu erhalten? Dank

Answer 1

ich hier mit zuschreiben würde vorschlagen data -Familie, wie folgt aus:

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

... als diese Art von Attribut war speziell zum Anhängen einiger Daten an DOM-Elemente entwickelt. Es ist meiner Meinung nach semantischer als mit class.

Sie können einfach auf diese Werte mit $('some selector').data('gallery') Syntax zugreifen.

Wie für rel Attribut, es sieht aus wie in HTML5 ist es auf den Satz von vordefinierten attributes beschränkt, und wird verwendet, um mehr High-Level-Beziehungen zwischen Dokumenten zu definieren.

Answer 2

Sie eine Klasse für jede Galerie stattdessen könnte hinzufügen: 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', 'Daten-Galerie') fancybox()..;