Last Updated : 11 Jul, 2025
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.
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-* Attribute Example 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 BrowsersThe 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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4