Categories
HTML Web development

HTML data-* Attribute

HTML data-* Attribute

The HTML data-* attribute allows embedding custom data attributes on all HTML elements.

The HTML data-* attribute contains two parts:

  • the attribute name (should not contain any uppercase letters, and must be at least one character long after the prefix “data-“).
  • the attribute value (can be any string).

Example:

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(food) {
  var foodType = food.getAttribute("data-food-type");
  alert("The " + food.innerHTML + " is a " + foodType + " food.");
}
</script>
</head>
<body>

<ul>
  <li onclick="showDetails(this)" id="thai" data-food-type="mexican">Taco</li>
  <li onclick="showDetails(this)" id="european" data-food-type="spanish">Paella</li>  
  <li onclick="showDetails(this)" id="middle-eastern" data-food-type="middle-eastern">Kibbeh</li>  
</ul>

</body>
</html>

Output:

Click on the name of the meal to see what kind of cuisine is from:

  • Taco
  • Paella
  • Kibbeh

Enjoy coding!

Read also:

HTML Attributes

HTML class Attribute

HTML contenteditable Attribute