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://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:
Con ogni probabilità anche tu avrai ricevuto una mail da parte di Google Ads relativa…
Negli ultimi anni, misurare con precisione la reale profittabilità ed efficacia delle campagne advertising è…
Se le campagne di lead generation con Google Ads e Facebook Ads e la creazione…
CNH, società quotata alla Borsa di New York e una delle più prestigiose aziende nel…
Nello scenario del digital marketing e del digital contemporaneo, prendere decisioni guidate dai dati non…
LUISAVIAROMA è uno dei principali fashion e-tailer di lusso al mondo, con oltre 5 milioni…