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 per stabilire delle relazioni tra elementi o per aggiungere dei dati agli elementi stessi.
La soluzione, invece, è quella di usare gli attributi di dati.
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.