Glossario: Attributi Data HTML5 (Data Attributes)

Gli Attributi Data HTML5 sono stati implementati con l’aggiornamento di HTML5.

Il linguaggio HTML infatti ha avuto vari aggiornamenti nel corso del tempo, uno dei quali è stato appunto l’HTML5. La nascita risale ancora al 2004 ma il suo concreto utilizzo è arrivato nel 2014.

Fra le tante novità riguardanti gli attributi, gli Attributi Data-* (o Data Attributes) sono stati una piccola rivoluzione perché hanno permesso un’elevatissimo grado di personalizzazione degli attributi e delle informazioni all’interno del tag HTML.

Grazie ai Data-* attributes infatti è possibile memorizzare metadati privati (ovvero non visualizzabili dall’utente) e personalizzabili all’interno degli elementi HTML, cosa che prima gli smanettoni facevano ad esempio attraverso elementi class o rel attributes.

La sintassi è la seguente:

data-*=valore personalizzato

 

Al posto dell’asterisco puoi inserire caratteri a piacimento (senza lettere maiuscole) che ti servono per identificare il valore.

Ogni elemento può contenere un numero potenzialmente infinito di questi attributi e con qualsiasi valore.

Un esempio?

 
<ul id="evento">
 <li data-prezzo="15" data-periodo="Gennaio" data-nomeconcerto="U2">Primo</li>
 <li data-prezzo="10" data-periodo="Febbraio" data-nomeconcerto="Guns & Roses">Secondo</li>
 <li data-prezzo="18" data-periodo="Marzo" data-nomeconcerto="AC/DC">Terzo</li>
</ul>

Ma infatti, a cosa serve questo?

I data-attributes ci sono utili per estrapolare informazioni aggiuntive. È possibile estrapolare i loro valori attraverso Javascript. Un caso pratico è la possibilità di migliorare la user experience, senza utilizzare chiamate più importanti come AJAX o submit.

 

Possiamo quindi richiamare i data attributes in Javascript grazie all’ID dell’elemento seguito da dataset e nome dell’attributo.

Ecco un esempio pratico. Abbiamo questo link:

 
<a id="my-link-id" src="https://www.tagmanageritalia.it" data-mionome="Link Tag Manager Italia">Clicca qui</a>

 

Per prelevare il valore “Link Tag Manager Italia” con Javascript:

 
document.getElementById('my-link-id').dataset.mionome

 

Questo ci permette di fare molte magie 🙂 In queste guide te ne spiego alcune:

• Data attributes HTML5 per la SEO
• Tracciare gli eventi gestendo dinamicamente categoria, azione ed etichetta con Attributi Data HTML5 in Google Tag Manager