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>
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://dev.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:
Quando qualche anno fa Google Tag Manager lanciò l’Attivatore Visibilità di un Elemento ricordo ancora…
Non credo sia necessario specificare che oggi la maggior parte delle visite e una bella…
Se sei un digital marketer o un digital analyst probabilmente saprai quanto oggi sia importante…
In occasione dell’evento “ECOMMERCE FOOD CONFERENCE” di Bologna, Tag Manager Italia ha condotto una ricerca…
Google Analytics 4 è uno strumento straordinario per raccogliere e analizzare i dati sul comportamento…
Se segui le guide e i webinar di Tag Manager Italia da un po’, probabilmente…