HTML data-* Global Attribute

Description

The global attribute data-* is used to store user data (the ability to insert an attribute with user data to any HTML element). This attribute makes it possible, using JavaScript, to provide more advanced features for the user, without resorting to server-side requests.

The attribute name must not contain capital letters, and must also contain at least one character after the prefix data-. The attribute value can be any string.

Syntax

<element data-*="value">

Values

  • *This value must not contain capital letters, and must also contain at least one character after the prefix data-. The attribute value can be any string.
  • valueThis value represents the data that is stored.

Example

<!DOCTYPE html>
<html>
<head>
<title>Data Global Attribute</title>
</head>
<body>
<p id="test">Click on an item for details:</p>
<script>
function showDetails(test) {
var testType = test.getAttribute("data-test");
alert(test.innerHTML + " is a " + testType + "."); 
}
</script>
<ul>
<li onclick="showDetails(this)"data-test="star">The Sun</li>
<li onclick="showDetails(this)"data-test="satellite">The Moon</li>
<li onclick="showDetails(this)"data-test="planet">Mercury</li>
</ul>
</body>
</html> 

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
YesYesYesYesYesYes
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
YesYesYesYesYesYes