Tag HTML <data>

Il tag <data> è un elemento HTML che collega un contenuto visibile alla versione leggibile dalle macchine dello stesso valore. Il testo comprensibile all'utente rimane all'interno dell'elemento, mentre la forma precisa e accessibile dagli script è memorizzata nell'attributo value.

Questo è utile quando gli script necessitano di dati in un formato specifico che non si vuole mostrare all'utente. Ad esempio, immagina un elenco di prodotti. Ogni prodotto ha un ID interno, ma si vuole che gli acquirenti vedano solo il nome del prodotto. L'ID viene inserito nell'attributo value e il nome leggibile tra i tag, così JavaScript può leggere l'ID mentre l'utente legge il nome:

<data value="1545325112">Coca-Cola 500ml</data>

Qui 1545325112 è il valore leggibile dalle macchine (l'ID del prodotto) e Coca-Cola 500ml è ciò che l'utente vede.

Quando usare <data>

<data> è uno dei vari modi per associare dati leggibili dalle macchine al contenuto. Scegliere quello giusto è importante:

• Usa <data> quando c'è un testo visibile che ha una controparte naturale leggibile dalle macchine — un ID prodotto, un numero d'ordine, un codice SKU, un valore enum, una valutazione espressa come numero. L'elemento è un vero elemento HTML, quindi la relazione tra testo e valore fa parte della semantica del documento.
• Usa un attributo personalizzato data-* (ad esempio data-product-id="1545325112") quando il valore appartiene a qualsiasi elemento e hai semplicemente bisogno di un posto dove i tuoi script possano leggerlo. data-* è più flessibile perché può essere inserito su qualsiasi tag con qualsiasi nome di attributo, ma non ha un significato standardizzato.
• Usa i microdati (itemprop) o JSON-LD quando l'obiettivo è esporre dati strutturati ai motori di ricerca (schema.org). <data> da solo non dice a Google cosa significa il valore.

Un pattern comune è combinare <data> con i microdati, usando itemprop per nominare la proprietà e value per contenere il numero preciso:

<data itemprop="productID" value="1545325112">Coca-Cola 500ml</data>

<data> vs <time>

L'elemento <time> è un elemento correlato specializzato di <data>. Il confine semantico è semplice:

• Usa <time> solo per date, orari, durate e fusi orari (ha il proprio attributo datetime e un formato di analisi definito).
• Usa <data> per ogni altro tipo di valore leggibile dalle macchine — ID, prezzi, quantità, codici e così via.

Quindi <time datetime="2026-06-17">June 17</time> è corretto, ma non dovresti mai racchiudere un ID prodotto in <time>.

Lettura del valore con JavaScript

<data> è rappresentato dall'interfaccia HTMLDataElement, la cui proprietà value riflette l'attributo value. Quindi puoi leggerlo direttamente:

<data id="drink" value="1545325112">Coca-Cola 500ml</data>

<script>
  const el = document.getElementById("drink");

  console.log(el.value);                  // "1545325112"  (HTMLDataElement.value)
  console.log(el.getAttribute("value"));  // "1545325112"  (raw attribute)
  console.log(el.textContent);            // "Coca-Cola 500ml"  (visible text)
</script>

Sia el.value che el.getAttribute("value") restituiscono la stringa leggibile dalle macchine; textContent fornisce l'etichetta leggibile dall'utente.

Accessibilità

Le tecnologie assistive come gli screen reader annunciano il contenuto testuale visibile, non l'attributo value. Un utente di screen reader sente "Coca-Cola 500ml", mai "1545325112".

Per questo motivo, il testo visibile deve sempre essere significativo di per sé. Non nascondere mai informazioni di cui un utente ha bisogno all'interno di value aspettandosi che gli screen reader le rendano disponibili. Considera value strettamente come dato per gli script e mantieni tutto il significato rivolto all'utente nel testo dell'elemento.

Supporto browser e SEO

Tutti i browser moderni interpretano <data>, ma non c'è alcun rendering visivo o comportamentale speciale — viene visualizzato esattamente come uno <span>. Il suo scopo è puramente semantico.

Per la stessa ragione, <data> non è un sostituto per i dati strutturati. I motori di ricerca non interpretano un attributo value semplice come dato schema.org. Se hai bisogno di risultati avanzati, usa i microdati appropriati (itemprop) o, più comunemente oggi, JSON-LD.

Sintassi

Il tag <data> si usa in coppia. Il contenuto viene scritto tra il tag di apertura (<data>) e quello di chiusura (</data>).

Esempio del tag HTML <data>:

Tag HTML <data>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Refrigerated drinks</p>
    <ul>
      <li>
        <data value="1545325112">Coca-Cola 500ml</data>
      </li>
      <li>
        <data value="1545325113">Coca-Cola 330ml</data>
      </li>
      <li>
        <data value="1545325114">Coca-Cola Light 330ml</data>
      </li>
    </ul>
  </body>
</html>

Attributi

Il tag <data> supporta anche gli Attributi Globali e gli Attributi Evento.

Pratica