HTML data-* Attributes - HTML Global Attributes

Definition and Usage

The data-* attributes is used to store custom data private to the page or application.

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

The data-* attributes consist of two parts:

The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
The attribute value can be any string

Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<element data-*="somevalue">

Attribute Values

Value	Description
somevalue	Specifies the value of the attribute (as a string)

How to Use the data-* attribute to embed custom data

Click on a species to see what type it is:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
  let animalType = animal.getAttribute("data-animal-type");
  alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>

<h1>Species</h1>
<p>Click on a species to see what type it is:</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>

</body>
</html>

Output should be:

html data-* attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Global Attributes
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference