#data-attribute

In HTML5, the custom data attribute allows you to store hidden data in HTML elements. Any attribute that starts with "data-" will be treated as a storage area for private data. Super useful!

Here's an example!

<li data-age="24" data-color="purple" data-food="burger">    Bob </li>

That's it! There are two cool things you can do:

1) In your JavaScript you can pull data from the data-attribute using a simple JavaScript API (element.dataset):

  var li = document.getElementByTagName("li");   li.dataset.age === 24; // true   li.dataset.color === "purple"; // true   li.dataset.food === "burger"; // true   alert("Bob's favorite color is " + li.dataset.color);   // alerts "Bob's favorite color is purple"

2) Use the data-attribute as a CSS selector to select elements:

  [data-class="age"] {     font-weight: bold;     color: orange;   }