The data-* attributes in HTML is used to embed custom data attributes on all HTML elements. This is a global attribute and can be used on any element.
Following is the syntax −
<element data-attribute-name=”attribute_value”
Above, the attribute-name should have only lowercase character. With that, it must be at least one character long after the prefix "data-"
Let us now see an example to implement the data-* attributes in HTML. Click on any of the attribute to get more info about it −
Example
<!DOCTYPE html>
<html>
<head>
<script>
function display(tutorial) {
var type = tutorial.getAttribute("data-tutorial-type");
alert(tutorial.innerHTML + " = " + type + ".");
}
</script>
</head>
<body>
<h1>Tutorials</h1>
<h2 onclick="display(this)" id="java" data-tutorial-type="programming language">Java</h2>
<h2 onclick="display(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
<h2 onclick="display(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
</body>
</html>Output
Now click any of the <h2> heading above to get more info about the attribute. We clicked on the jQuery attribute here −
