Meanings of data-value, data-title, data-... attributes in HTML

Question

I have seen in various HTML code markings such as: data-value, data-title, are almost always tag attribute names with the suffix: data-, I would like to know what they mean and without any recommendation of use/use advantage.

Answer 1

Are attributes included from the HTML5.

Basically are attributes used to assist the developer in dynamic queries on the page itself without having to access a servidor -> BD.

The data could already be mounted on the page itself when requested to the server, and in case of any user interaction, are easily accessible via JavaScript or CSS.

The data-* Attributes is used to store custom data private to the page or application.

The data-* Attributes gives us the Ability to embed custom data Attributes on all HTML Elements.

The stored (custom) data can then be used in the page’s JavaScript to create a more Engaging user Experience (without any Ajax calls or server-side database darlings).

---

The attributes data-* are used to store customized data private to the page or app.

The attributes data-* we give the ability to incorporate attributes of Personalized data in all elements HTML.

The stored data can then be used in the JavaScript page to create a more enjoyable user experience (without being necessary any calls Ajax or consultations of BD of server side).

Source: w3schools

---

EXAMPLE

$(".teste").click(function() {
  pais = $(this).data("country");
    if(pais =="Brasil") {
      alert("Brasileiro!");
    }else{
      alert("Americano!");
    }
});

.teste[data-country=Brasil] {
    color: yellow;
    background-color:green;
}

.teste[data-country=USA] {
    color: red;
    background-color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="teste" data-name="Marcelo Bonifazio" data-city="São Paulo" data-state="SP"
data-country="Brasil" data-lang="pt-br">
  Clique-Aqui!
</li>
<li class="teste" data-name="Ricardo Henrique" data-city="Oklahoma City" data-state="Oklahoma" data-country="USA" data-lang="EN-en">
  Clique-Aqui!
</li>

Answer 2

Very well explained by the friend @Marcelobonifazio.

But only one correction: The example Javascript would actually be done by the library jQuery.

Without jQuery, the way to get this data from the attribute data is made through the object dataset, that comes "inside" of the element that is selected by javascript.

Behold:

HTML:

<div data-nome="Stackoverflow" id="teste"></div>

Javascript:

var element = document.querySelector('#teste');
// obtém os dados
console.log(element.dataset.nome); // Stackoverflow
//define o dado
element.dataset.nome = 'SOPT';

Also, the forms with which the attribute data is treated are different when we compare their use between Javascript pure and jQuery

It caused me confusion. My doubt was taken in this question I’ve done here at SOPT.

See a small example of code working on JSFIDDLE