HTML Academy · Lezione

Attributi data personalizzati: data-*

Memorizzare dati personalizzati direttamente negli elementi con gli attributi data-*

Lezione 4 di 413 passaggi

Attributi data personalizzati: data-* è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Che cosa sono gli attributi data-*?

Gli attributi data personalizzati consentono di memorizzare informazioni aggiuntive direttamente negli elementi HTML:

<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>

<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->

Perché esiste data-*

Prima di data-*, gli sviluppatori memorizzavano i dati aggiuntivi in:

Campi input nascosti (poco ordinati)
Nomi delle classi CSS (fragili)
Attributi non standard come rel o title (HTML non valido)

HTML5 ha formalizzato data-* come metodo ufficiale per incorporare dati personalizzati senza influire sulla semantica o sulla presentazione.

Regole per i nomi

Regole per i nomi degli attributi data-*:

Devono iniziare con data-
Il nome può contenere lettere minuscole, cifre, trattini, caratteri di sottolineatura e punti
Il nome non può contenere lettere maiuscole (la specifica HTML le converte in minuscole)
Il nome non può iniziare con xml

<div data-user-id="1">OK</div>
<div data-product-category="tools">OK</div>
<!-- <div data-XML-thing="1">BAD: starts with xml -->
<!-- <div data-MyProp="1">BAD: uppercase in name -->

Leggere data-* in JavaScript

Acceda ai dati personalizzati tramite la proprietà dataset:

<button id="btn"
  data-user-id="42"
  data-action="delete"
  data-confirm-message="Are you sure?"
>
  Delete
</button>

<script>
const btn = document.getElementById('btn');
console.log(btn.dataset.userId);          // '42'
console.log(btn.dataset.action);          // 'delete'
console.log(btn.dataset.confirmMessage);  // 'Are you sure?'
// Note: data-user-id → dataset.userId (camelCase conversion)
</script>

Scrivere data-* con dataset

Imposti e rimuova gli attributi data tramite dataset:

const card = document.querySelector('.card');

// Set:
card.dataset.status = 'active';
// Now: <div class="card" data-status="active">

// Delete:
delete card.dataset.status;
// Now: data-status is removed

// Alternatively with setAttribute:
card.setAttribute('data-status', 'inactive');
card.removeAttribute('data-status');

Conversione da trattini a camelCase

L'API dataset converte i nomi separati da trattini in camelCase:

<!-- HTML attribute         JavaScript dataset property -->
data-user-id           →   dataset.userId
data-product-category  →   dataset.productCategory
data-max-retries       →   dataset.maxRetries
data-is-active         →   dataset.isActive

Selettori di attributo CSS

Usi gli attributi data nei selettori CSS:

[data-status="active"] {
  color: green;
}

[data-status="inactive"] {
  color: gray;
  text-decoration: line-through;
}

/* Present but any value: */
[data-featured] {
  border: 2px solid gold;
}

Schema dei tooltip

Costruisca tooltip esclusivamente con CSS usando gli attributi data:

<span data-tooltip="This is a tooltip">Hover me</span>

/* CSS: */
/*
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);  /* attr() reads the attribute value */
  position: absolute;
  background: #333;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
*/

Schema per il tracciamento dello stato

Tracci lo stato di un componente con gli attributi data:

<button data-state="off" id="toggle">Toggle</button>

<script>
document.getElementById('toggle').addEventListener('click', function() {
  const state = this.dataset.state;
  this.dataset.state = state === 'off' ? 'on' : 'off';
  this.textContent = this.dataset.state === 'on' ? 'Active' : 'Toggle';
});
</script>

/* CSS: */
/* [data-state="on"] { background: green; color: white; } */

data-* e variabili JavaScript a confronto

Quando usare data-* invece di memorizzare i dati in JavaScript:

Usi data-* per i valori che corrispondono direttamente a un elemento DOM e che possono essere letti dal CSS
Usi variabili o oggetti JavaScript per strutture dati complesse non associate a elementi specifici
Non memorizzi dati di grandi dimensioni o sensibili in data-*: sono visibili negli Strumenti per sviluppatori

data-* non serve per la presentazione

Errori comuni da evitare:

<!-- BAD: storing presentation data in data-* -->
<div data-color="red" data-font-size="18">Text</div>
<!-- Use CSS classes instead: -->
<div class="text-danger text-lg">Text</div>

<!-- BAD: storing sensitive data -->
<div data-api-key="sk-123...">Content</div>
<!-- NEVER store secrets in HTML attributes -->

Verifica rapida

In che modo l'API dataset accede a un attributo data-product-id?

Rispondi nella lezione interattiva

Riepilogo: attributi data-*

Elementi essenziali degli attributi data personalizzati:

data-name="value" — memorizza metadati personalizzati negli elementi
Accessibili tramite element.dataset.camelCase
I trattini vengono convertiti in camelCase nell'API dataset
Utilizzabili nel CSS con i selettori [data-name="value"]
Non memorizzi mai dati sensibili (chiavi, password) negli attributi data

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 40
Lezioni: 159

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Attributi data personalizzati: data-*» è gratuita?

Sì — il testo completo di «Attributi data personalizzati: data-*» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Attributi data personalizzati: data-*»?

Memorizzare dati personalizzati direttamente negli elementi con gli attributi data-* Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Attributi data personalizzati: data-*»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy