A few words about data-* attributes

Microdata is a powerful way to add structured data into HTML code, but HTML5 has also added the possibility of adding arbitrary data to an HTML element. For example, adding an attribute to specify the name of the photographer (or painter?) of a picture, or any kind of information that does not be fit within the regular attributes of the <img> element, like alt.

Suppose you coded: <img src="photo.jpg" photographer="Michel Buffa" date="14July2020">? It would not be valid!

However with HTML5 we may add attributes that start with data- followed by any string literal (WITH NO UPPERCASE) and it will be treated as a storage area for private data. This can later be accessed in your JavaScript code.

Valid HTML5 code: <img src="photo.jpg" data-photographer="Michel Buffa" date="14July2020">. You can set the data- attribute to any value.

The reason for this addition is that, in a bid to keep the HTML code valid, some classic attributes like alt, rel and title have often been misused for storing arbitrary data. The data-*attributes of HTML5 are an "official" way to add arbitrary data to HTML elements that is also valid HTML code.

The specification says: "Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements."

Data attributes are meant to be used by JavaScript and eventually by CSS rules: embed initial values for some data, or use data- attributes instead of JavaScript variables for easier CSS mapping, etc.

JavaScript API: the dataset property

Data attributes can be created and accessed using the dataset property of any HTML element.

Here is an online at JsBin example: 

In this example, when you click on the sentence that starts with "John Says", the end of the sentence changes, and the values displayed are taken from data­-* attributes of the <li> element.

HTML code from the example:

<li class="user" data-name="John Resig" data-city="Boston"

    data-lang="js" data-food="Bacon">

<b>John says:</b> <span>Hello, how are you?</span>

</li>

We just defined four data‐ attributes. 

JavaScript code from the example:

<script>

  var user = document.getElementsByTagName("li")[0];

  var pos = 0, span = user.getElementsByTagName("span")[0];

  var phrases = [

    {name: "city", prefix: "I am from "},

    {name: "food", prefix: "I like to eat "},

    {name: "lang", prefix: "I like to program in "}

  ];

  user.addEventListener( "click", function(){

    // Pick the first, second or third phrase

    var phrase = phrases[ pos++ % 3 ];

    // Use the .dataset property depending on the value of phrase.name

    // phrase.name is "city", "food" or "lang"

    span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];

    // could be replaces by old way..

    // span.innerHTML = phrase.prefix + user.getAttribute("data-" + phrase.name );

  }, false);

</script>

All data‐ attributes are accessed using the dataset property of the HTML element: in this example, user.dataset[phrase.name] is either user.dataset.city, user.dataset.food, or user.dataset.lang.

Using CSS pseudo elements ::before and ::after with the attr() function to display the value of data-* attributes

This example shows how data-* attributes can be added on the fly by JavaScript code and accessed from a CSS rule using the attr() CSS function.

Try the online example at JsBin.