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 AttributiData-* (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.
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:
