HTML data-* Attributes

HTMLWeb DevelopmentFront End Technology

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

 Live Demo

<!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 −

raja
Published on 20-Jun-2019 11:11:40
Advertisements