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="http://stage-tmi.inrisalto.net" 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:

 

Condividi anche tu Google Tag Manager!

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.