Sebbene sia sempre stato tecnicamente possibile aggiungere un attributo “personalizzato” ad un tag HTML, questa pratica non era ufficialmente accettata, e risultava in un markup considerato “invalido”.

Ad esempio:

<img src="..." alt="..." title="..." id="myImg" titolo-speciale="valore" />

Con HTML 5 è ora diventato ufficialmente possibile specificare attributi speciali semplicemente prefissando il nome con data-, ossia nella forma data-nome="valore".

L’esempio soprastante diverrebbe quindi:

<img src="..." alt="..." title="..." id="myImg" data-titolo-speciale="valore" />

Possiamo poi recuperare il valore del nuovo attributo in JavaScript con il metdo getAttribute, proprio come faremmo normalmente:

var img = document.getElementById("myImg");

var titolo_speciale = img.getAttr("data-titolo-speciale);