Manuale di Referenza HTML

Completo di Tag HTML

Attributi data-* HTML

L'attributo data-* è una classe di attributi chiamati attributi dati personalizzati, che ci permette di inserire attributi dati personalizzati su tutti gli elementi HTML e di scambiare dati specifici tra HTML e script (di solito JavaScript).

Proprietà globali HTML

Esempio Online

Usa l'attributo data-* per inserire dati personalizzati:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Corso di Base(oldtoolbag.com)</title>　
<script>
function showDetails(animal)
{
　　　　var animalType = animal.getAttribute("data-animal-type");
　　　　alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1>Specie</h1>
<p>Clicca su una specie per vedere di che tipo è:</p>
<ul>
　　<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
　　<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>　　
　　<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>　　

</ul>
</body>

</html>

Prova a vedere ‹/›

Compatibilità dei browserIEFirefoxOperaChrome

Safari

Tutti i browser mainstream supportano l'attributo data-*.

Definizione e utilizzo

L'attributo data-* viene utilizzato per memorizzare dati personalizzati utilizzati nella pagina successiva.

L'attributo data-* può essere inserito in tutti gli elementi HTML.

I dati personalizzati possono migliorare l'esperienza di interazione della pagina (senza utilizzare Ajax o cercare dati sul server).

L'attributo data-* è composto da due parti:
Il nome dell'attributo non deve contenere lettere maiuscole e deve avere almeno un carattere dopo data-.

L'attributo può essere qualsiasi stringa Attenzione:

Differenze tra HTML 4.01 e HTML5

L'attributo data-* è stato aggiunto in HTML5.

Sintassi

<elemento data-*="somevalue">

Valore dell'attributo

Valore	Descrizione
somevalue	Valore dell'attributo (una stringa)

Proprietà globali HTML

HTML: <template> etichetta