HTML data-* Attributes
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 Information
In 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.
<!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-* Attribute
Example 2: Storing Movie Information
This 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.
<!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.
Note: Older versions of some browsers may have limited support, so it’s always a good practice to test your web applications across multiple browsers.
HTML data-* Attributes – FAQs
How do you access data-* attributes in JavaScript?
Use the dataset property of an element to access its data-* attributes. For example: element.dataset.userId retrieves the value of data-user-id from an element.
Can data-* attributes store different types of data?
Yes, data-* attributes can store any type of string data. If you need to store numbers, booleans, or objects, you can use JavaScript to convert them to/from strings.
What are the use cases for data-* attributes?
data-* attributes are used to pass custom data between HTML and JavaScript, manage state information, create dynamic content, store identifiers, and handle data needed for client-side scripting.
Can you modify data-* attributes using JavaScript?
Yes, you can modify data-* attributes by changing their values using JavaScript. For example: element.dataset.userId = “67890” updates the data-user-id value to “67890”.
What are the naming rules for data-* attributes?
A data-* attribute must start with “data-” and be followed by a custom name that consists of letters, numbers, dashes (-), underscores (_), colons (:), or periods (.). For example: data-product-id, data.itemName, data-user-age.
