HTML5: evitare l'abuso dell'attributo rel usando invece gli attributi di dati

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.