0Pricing
HTML Academy · Lezione

Sintassi di data-* e convenzioni di denominazione

Comprendere quali nomi di attributi data-* sono validi e qual è il loro scopo

Sintassi di data-* e convenzioni di denominazione è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Ripasso: attributi data-*

Gli attributi data (data-*) memorizzano informazioni personalizzate sugli elementi HTML:

<div data-user-id="42" data-role="admin" data-active="true">
  User Card
</div>

Regole valide per la denominazione

Requisiti per la denominazione degli attributi data-*:

  • Devono iniziare con data-
  • Devono essere seguiti da almeno un carattere
  • Possono contenere solo lettere minuscole, cifre, trattini, caratteri di sottolineatura, punti e due punti
  • Non possono contenere lettere maiuscole (il parser HTML converte gli attributi in minuscolo)
  • Non possono contenere spazi

Convenzioni di denominazione

Convenzioni di denominazione della community:

<!-- BEM-style: module__element--modifier -->
data-card="profile"
data-card-id="42"
data-card-state="expanded"

<!-- Descriptive: domain-concept -->
data-product-id="SKU-123"
data-analytics-event="click-cta"
data-feature-flag="dark-mode"

Più attributi data

Un elemento può avere un numero qualsiasi di attributi data:

<button
  type="button"
  data-action="delete"
  data-target-id="user-42"
  data-confirm="true"
  data-confirm-message="Delete this user permanently?"
>Delete</button>

I valori sono sempre stringhe

I valori degli attributi data sono sempre stringhe — li analizzi in JavaScript:

const el = document.querySelector('[data-user-id]');

console.log(el.dataset.userId);              // '42' (string)
console.log(typeof el.dataset.userId);       // 'string'

// Parse to number:
const id = parseInt(el.dataset.userId, 10);   // 42 (number)

// Parse to boolean:
const active = el.dataset.active === 'true'; // true (boolean)

// Parse to JSON:
const config = JSON.parse(el.dataset.config); // object

Memorizzare JSON in data-*

Memorizzi i dati complessi come stringhe JSON:

<div
  data-config='{"theme":"dark","locale":"en-US","pageSize":20}'
  id="app"
></div>

<script>
const el = document.getElementById('app');
const config = JSON.parse(el.dataset.config);
console.log(config.theme);    // 'dark'
console.log(config.pageSize); // 20
</script>

data-* vs elementi personalizzati

Quando scegliere data-* invece di elementi personalizzati o oggetti JavaScript:

  • data-* — metadati specifici dell'elemento, visibili nell'HTML e accessibili dal CSS
  • Elementi personalizzati — componenti complessi e riutilizzabili con comportamento incapsulato
  • JavaScript Map/WeakMap — dati non necessari nell'HTML; dati grandi o complessi

Uso di data-* nei framework

Usi comuni degli attributi data nei framework:

<!-- Bootstrap: target collapsible elements -->
<button data-bs-toggle="collapse" data-bs-target="#menu">
  Toggle
</button>

<!-- Alpine.js: component data -->
<div x-data="{ open: false }">

<!-- Stimulus: controller identification -->
<div data-controller="menu" data-menu-open-value="false">

<!-- Testing libraries: stable selectors -->
<button data-testid="submit-btn">Submit</button>

Accessibilità e data-*

Gli attributi data non vengono annunciati dagli screen reader — non li utilizzi per informazioni sull'accessibilità:

<!-- BAD: accessibility info in data-* -->
<button data-label="Close dialog">×</button>
<!-- Screen reader does NOT read data-label -->

<!-- GOOD: use aria-label for accessibility -->
<button aria-label="Close dialog">×</button>

Considerazioni sulle prestazioni

Gli attributi data-* hanno un impatto trascurabile sulle prestazioni:

  • La lettura di dataset è veloce (O(1))
  • Un uso intenso di data-* su migliaia di elementi non crea problemi
  • Memorizzare blocchi di grandi dimensioni (immagini, JSON di grandi dimensioni) in data-* è inefficiente
  • Utilizzi WeakMap per memorizzare oggetti JavaScript di grandi dimensioni associati agli elementi DOM

Riepilogo: best practice per data-*

Best practice per data-*:

  • Utilizzi nomi in minuscolo separati da trattini
  • I valori sono sempre stringhe — li analizzi secondo necessità
  • Per JSON: JSON.stringify / JSON.parse
  • Utilizzi data-* per i metadati necessari al CSS o a JavaScript
  • Non è un sostituto degli attributi ARIA
  • Non memorizzi segreti (sono visibili negli Strumenti per sviluppatori)

Verifica rapida

Di quale tipo sono sempre i valori degli attributi restituiti da dataset?

Riepilogo: sintassi di data-*

Elementi essenziali della sintassi di data-*:

  • Formato: data-[lowercase-name]="value"
  • Accesso: element.dataset.camelCaseName
  • Tutti i valori sono stringhe — esegua esplicitamente il parsing
  • Memorizzi dati complessi come JSON
  • Utilizzi il minuscolo, senza maiuscole né spazi nel nome dell'attributo

Domande Frequenti

La lezione «Sintassi di data-* e convenzioni di denominazione» è gratuita?

Sì — il testo completo di «Sintassi di data-* e convenzioni di denominazione» è 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 «Sintassi di data-* e convenzioni di denominazione»?

Comprendere quali nomi di attributi data-* sono validi e qual è il loro scopo 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 1 di 4.

Quanto tempo richiede la lezione «Sintassi di data-* e convenzioni di denominazione»?

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

  1. Sintassi di data-* e convenzioni di denominazione
  2. Accedere a data-* con dataset in JavaScript
  3. Usare data-* con i selettori di attributo CSS
  4. Pattern pratici: tooltip e monitoraggio dello stato
← Torna a HTML Academy