HTML - data-* Attribute

HTML data-* attribute is global attribute is used to form a class of attributes that define our own custom data attributes and store custom data in private on the page or application.

Following are the parts of this data attributes

Attribute Name: It contains one character long, contain no capital letters and be prefixed with 'data-*'.
Attribute Value: Can be any string.

Syntax

<element data-* = "10784"> ...content </element >

Here "*" can be anything as you will see in the below examples.

Applies On

Most HTML elements support data-* attributes, but there are a few exceptions. Elements that are not typically used to contain content or don't have any intrinsic functionality where custom data attributes would be applicable may not support them. For example <style>, <html>, <title>, <script>, <meta> few tags that not support custom data attribute.

Examples of HTML data-* attribute

Bellow examples will illustrate the HTML data-* attribute, where and how we should use this attribute!

Define custom Data using dat-* Attribute

In the following example we will create a list of itema and define the data-course-type on each item.

<!DOCTYPE html>
<html>

<head>
   <title>HTML data-* Attribute</title>
</head>

<body>
   <ul>
     <li data-course-type="frontEnd">HTML</li>
     <li data-course-type="backEnd">Php</li>
     <li data-course-type="fullStack">MERN</li>
   </ul>
</body>

<html>

Display the custom data on Hovering

In the following example, we are creating an HTML document and using the data-* attribute to embed custom data, as follows −

<!DOCTYPE html>
<html>

<head>
   <style>
      h1 {
         margin: 0;
      }
   
      ul {
         margin: 10px 0 0;
      }
   
      li {
         position: relative;
         width: 200px;
         padding-bottom: 10px;
      }
   
      li:after {
         content: 'Data ID: 'attr(data-id);
         position: absolute;
         top: -22px;
         left: 10px;
         background: black;
         color: white;
         padding: 2px;
         border: 1px solid #eee;
         opacity: 0;
         transition: 0.5s opacity;
      }
   
      li:hover:after {
         opacity: 1;
      }
   </style>
</head>

<body>
   <h1>Secret agents</h1>
   <ul>
      <li data-id="10784">
      Jason Walters, 003: Found dead in "A View to a Kill".
      </li>
      <li data-id="97865">
      Alex Trevelyan, 006: Agent turned terrorist leader.
      </li>
      <li data-id="45732">
      James Bond, 007: The main man; shaken but not stirred.
      </li>
   </ul>
</body>

</html>

Use custom data in JavaScript

Let's look into the another example, where we are going to use the data-* attribute to embed custom data. Here data-org-type will store what type of organization in the current li element have.

<!DOCTYPE html>
<html>

<head>
   <title>data-* attribute</title>
</head>

<body>
   <h1>Organizations</h1>
   <p>Click on a organization to see what type it is:</p>
   <ul>
      <li onclick="showDetails(this)" 
         id="tutorialspoint" 
         data-org-type="EdTech organization">
            Tutorialspoint
         </li>
      <li onclick="showDetails(this)" 
         id="amazon" 
         data-org-type="E-commerce organization">
            Amazon
         </li>
      <li onclick="showDetails(this)" 
         id="google" 
         data-org-type="It & Product Based organization">
            Google
         </li>
      <p id="type"></p>
   </ul>
   <script>
      function showDetails(org) {
         let orgType = org.getAttribute("data-org-type");
         document.getElementById("type").innerHTML = 
         ("The " + org.innerHTML + " is a " + orgType + ".");
      }
   </script>
</body>

</html>

Supported Browsers

Attribute
data-*	Yes 4.0	Yes 5.5	Yes 2.0	Yes 3.1	Yes 9.6

html_attributes_reference.htm