Il problema principale dell'attributo rel in HTML5 è che accetta solo pochi valori considerati validi. Notiamo invece come questo attributo venga usato erroneamente da molti siti e soprattutto da molti plugin per jQuery per stabilire delle relazioni tra elementi o per aggiungere dei dati agli elementi stessi. La soluzione, invece, è quella di usare gli attributi personalizzati HTML5 di tipo data-* per questo scopo.
Un tipico esempio sono i link di paginazione di uno slideshow. Solitamente per stabilire un collegamento con una slide precisa viene utilizzata questa struttura:
<div id="slideshow-paging">
<a href="#" rel="0">1</a>
<a href="#" rel="1">2</a>
<a href="#" rel="2">3</a>
</div>
In questo caso il valore dell'attributo rel corrisponde all'indice della slide di riferimento. Tuttavia, questa struttura non è valida e solleverà un errore di validazione.
Ecco invece un esempio valido:
<div id="slideshow-paging">
<a href="#" data-slide="0">1</a>
<a href="#" data-slide="1">2</a>
<a href="#" data-slide="2">3</a>
</div>
In questo caso l'attributo data-slide svolge la stessa funzione dell'attributo rel, ma in questo caso la struttura generata è valida.
jQuery fornisce il metodo .data() per leggere il valore di questo tipo di attributi:
$('a', '#slideshow-paging').click(function(e) {
e.preventDefault();
var $a = $(this);
var currentSlideIndex = $a.data('slide');
var currentSlide = $('div.slide').eq(currentSlideIndex);
$('#slideshow-wrapper').animate({
left: - currentSlide.position().left
}, 1000);
});
Il metodo .data() non ha bisogno del prefisso data- ma solo del nome dell'attributo personalizzato (slide). Come si può notare, questo approccio è molto più semantico e soprattutto non crea problemi con la validazione HTML.