I dati personalizzati o attributi dati in HTML (rappresentati come `data-*`) sono usati per memorizzare informazioni extra sulle proprietà HTML che non hanno attributi predefiniti per memorizzare i dati. Possono essere utilizzati in CSS per applicare stili specifici o in JavaScript / jQuery per manipolare gli elementi con dati specifici.
Ecco un esempio di come utilizzare `data-*` in HTML:
```
In questo esempio abbiamo un div con un attributo `data-mio-dato` che ha un valore di “valorePersonalizzato”. Questo può essere utilizzato in CSS o JavaScript.
Ad esempio, in CSS, possiamo utilizzare l’attributo per applicare stili specifici:
```
div[data-mio-dato=“valorePersonalizzato”] {
color: blue;
}
```
In JavaScript, possiamo accedere a quell’attributo e farne qualcosa. Usando ‘vanilla’ JavaScript:
```
let div = document.getElementById(‘mioDiv’);
let dato = div.getAttribute(‘data-mio-dato’);
console.log(dato); // Questo stamperà “valorePersonalizzato“
```
E qui c’è un esempio di come utilizzare l’attributo `data-*` con jQuery:
```
let dato = $(‘#mioDiv’).data(‘mio-dato’);
console.log(dato); // Questo stamperà “valorePersonalizzato“
```
Ricorda, i nomi `data-*` devono contenere solo lettere minuscole e non devono iniziare con “xml”, indipendentemente dal fatto che siano maiuscole o minuscole.
