Glossario

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:

 

Matteo Zambon

Recent Posts

[Breaking News] Google Tag Manager e il caricamento automatico del Google Tag: cosa cambia e cosa fare entro il 10 aprile 2025

Con ogni probabilità anche tu avrai ricevuto una mail da parte di Google Ads relativa…

2 settimane ago

Cos’è e come funziona Google Meridian: il nuovo strumento di Marketing Mix Modeling per analizzare le campagne advertising

Negli ultimi anni, misurare con precisione la reale profittabilità ed efficacia delle campagne advertising è…

2 mesi ago

Come configurare Microsoft Clarity con Google Tag Manager

Se le campagne di lead generation con Google Ads e Facebook Ads e la creazione…

2 mesi ago

I trend della Marketing Analytics 2025: dati e report di mercato

Nello scenario del digital marketing e del digital contemporaneo, prendere decisioni guidate dai dati non…

3 mesi ago

Caso studio: LUISAVIAROMA ottimizza il tracciamento dei dati Ecommerce e le performance Advertising grazie GA4 e BigQuery

LUISAVIAROMA è uno dei principali fashion e-tailer di lusso al mondo, con oltre 5 milioni…

3 mesi ago