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>

Click to view the demo