What exactly represent a data-reveal-id attribute in html? and what is the difference with a classic id attribute?

Question

I am not so into HTML or HTML5 and I have the following question.

On a page that I am working on I have a map that has clickable regions implemented on a background image using the html tag, something like this:

<map name="Map" id="Map">

    <area data-reveal-id="UM" shape="poly" data-nome-regione="Umbria"
                            coords="135,167,138,151,143,141,154,148,155,159,165,167,146,178" 
                            alt="Umbria" 
                            onmouseover="RollMapOn('umbria')" onmouseout="RollMapOff()" onclick="caricaDettaglioRegione(this)" />

    ....................................................................

    ....................................................................
</map>

My question is: why uniquely identify an area using the data-reveal-id attribute and not a standard id attribute? What is the difference? What exactly is a data-reveal-id attribute?

Answer 1

An id attribute uniquely identifies an element in a document. It has a number of restrictions on what values it can have, defined by HTML, including the requirement for uniqueness.

data-* attributes are custom extensions primarily designed for JavaScript specific to a page to manipulate. The purpose (and allowed values) of any given data-* attribute are defined by the author of the page and is not standardised.