HTML data-* Attributes Last Updated : 09 Oct, 2024 Comments Improve Suggest changes Like Article Like Report The HTML data-* attributes allow you to store custom data directly in HTML elements, making passing information between HTML and JavaScript easier. This method improves interactivity in web applications without requiring server-side involvement or AJAX calls.Syntax<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>Examples of HTML data-* Attributes Example 1: Storing Book Author InformationIn this example, the data-book-author attribute is used to store the author of a book in an <li> element. This data can be accessed via JavaScript. HTML <!DOCTYPE html> <html> <head> <script> function showDetails(book) { let bookauthor = book.dataset.bookAuthor; alert( book.textContent + " 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)" data-book-author="Rabindra Nath Tagore"> Gitanjali </li> <li onclick="showDetails(this)" data-book-author="Mahatma Gandhi"> Conquest of Self </li> <li onclick="showDetails(this)" data-book-author="Sarojini Naidu"> Broken Wings </li> </ul> </body> </html> Output: Data-* AttributeExample 2: Storing Movie InformationThis example stores custom data like the director’s name and the movie's release year within HTML elements. JavaScript can access this data and use it to create dynamic content. HTML <!DOCTYPE html> <html> <head> <script> function showDetails(movie) { let directorName = movie.getAttribute( "data-director-name" ); let releaseYear = movie.getAttribute( "data-released-year" ); alert(`${movie.textContent} is released at ${releaseYear} and directed by ${directorName}.`); } </script> </head> <body> <h1>Movies</h1> <ul> <li onclick="showDetails(this)" data-director-name="Christopher Nolan" data-released-year="2008"> The Dark Knight </li> <li onclick="showDetails(this)" data-director-name="Christopher Nolan" data-released-year="2010"> Inception </li> <li onclick="showDetails(this)" data-director-name="James Cameron" data-released-year="2009"> Avatar </li> </ul> </body> </html> Output:Supported Browsers The data-* attribute is widely supported by all modern browsers, making it a reliable method for adding custom data attributes.Google ChromeEdge Internet Explorer Firefox OperaSafariNote: Older versions of some browsers may have limited support, so it's always a good practice to test your web applications across multiple browsers. Comment More infoAdvertise with us Next Article HTML data-* Attributes M motamarriphani Follow Improve Article Tags : Web Technologies HTML HTML-Attributes Similar Reads HTML data Attribute The HTML data Attribute is used to specify the URL of the Embedded file of the Object. It can be used with the <object> element. Syntax: <object data="URL">Attribute Values: It contains a single value URL which is used to specify the source of the object.The possible values of URL are:ab 2 min read HTML Attributes HTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element's behavior, appearance, or functionality in a variety of ways. Each attribute has a name and a value 8 min read HTML | data value attribute The HTML data value attribute is used to Specify the machine-readable translation of the content of the element.Syntax: <data attribute> Contents... </data> Example: html <!DOCTYPE html> <html> <head> <title>data tag</title> </head> <body> <h1 1 min read HTML Global Attributes HTML attributes provide additional information about an element and define its properties. Global attributes are special types of attributes that can be used with any HTML element, offering common functionality to enhance behavior and presentation.Global attributes can be applied to any HTML element 5 min read HTML Class Attribute The HTML class attribute is used to assign one or more CSS classes to an HTML element. By using classes, you can group elements together and apply consistent styles across them, streamlining both design and functionality.HTML class attribute Supported Tags: It supports all HTML elements. Syntax<t 3 min read Like