Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | data-* Attributes

  • Difficulty Level : Basic
  • Last Updated : 03 May, 2021

Custom Data Attributes allow you to add your own information to tags in HTML. Even though the name suggests otherwise, these are not specific to HTML5 and you can use the data-* attribute on all HTML elements. 
The data-* attributes can be used to define our own custom data attributes. It is used to store custom data in private to the page or application. 
There are mainly 2 parts of the Data Attributes: 
 

  1. Attribute Name: Must be at least one character long, contain no capital letters and be prefixed with ‘data-‘.
  2. Attribute Value: Can be any string.

Syntax: 
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>

Example: 
 

HTML




<!DOCTYPE html>
<html>
<head>
    <script>
        function showDetails(book) {
            var bookauthor = book.getAttribute("data-book-author");
            alert(book.innerHTML + " is written by "
                                    + bookauthor + ".");
        }
    </script>
</head>
 
<body>
    <h1>Books</h1>
     
<p>Click on the book name to know author's name :</p>
 
     
    <ul>
        <li onclick="showDetails(this)" id="gitanjali"
                data-book-author="Rabindra Nath Tagore">
            Gitanjali
        </li>
         
        <li onclick="showDetails(this)" id="conquest_of_self"
                data-book-author="Mahatma Gandhi">
            Conquest of Self
        </li>
        
        <li onclick="showDetails(this)" id="broken_wings"
                data-book-author="Sarojini Naidu">
            Broken Wings
        </li>
    </ul>
</body>
</html>                   

Output: 
 



When we click on the book, we can see the name of the author in a separate dialogue box. 
 

Supported Browsers: The browser supported by HTML | data-* Attribute

  are listed below: 
 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!