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 −


 Live Demo

<!DOCTYPE html>
   function display(tutorial) {
      var type = tutorial.getAttribute("data-tutorial-type");
      alert(tutorial.innerHTML + " = " + type + ".");
   <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>


Now click any of the <h2> heading above to get more info about the attribute. We clicked on the jQuery attribute here −

Updated on 29-Jun-2020 09:25:57