HTML global attribute data-*
The data-* attributes stores custom data.
The stored data can be used in the page's JavaScript.
The attribute name should not contain any uppercase letters, and must be prefixed with "data-".
The attribute value can be any string.
What's new in HTML5
The data-* attributes are new in HTML5.
Syntax
<element data-*="value">
Attribute Values
- value
- the value of the attribute
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
data-* |
Yes | Yes | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {<!-- w w w . j a v a 2 s . com-->
console.log(animal.getAttribute("data-animal-type"));
}
</script>
</head>
<body>
<p onclick="showDetails(this)" id="owl" data-animal-type="it is a test.">Click me</li>
</body>
</html>