Horje
HTML data-* 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:

  1. The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
  2. 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:

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


html data-* attributes

Related Articles
HTML accesskey Attribute HTML Global Attributes
HTML class Attribute HTML Global Attributes
HTML contenteditable Attribute HTML Global Attributes
HTML data-* Attributes HTML Global Attributes
HTML dir Attribute HTML Global Attributes
HTML draggable Attribute HTML Global Attributes
HTML enterkeyhint Attribute HTML Global Attributes
HTML hidden Attribute HTML Global Attributes
HTML id Attribute HTML Global Attributes
HTML inert Attribute HTML Global Attributes
HTML inputmode Attribute HTML Global Attributes
HTML lang Attribute HTML Global Attributes
HTML popover Attribute HTML Global Attributes
HTML spellcheck Attribute HTML Global Attributes
HTML style Attribute HTML Global Attributes
HTML tabindex Attribute HTML Global Attributes
HTML title Attribute HTML Global Attributes
HTML translate Attribute HTML Global Attributes
HTML Global Attributes HTML Global Attributes

Single Articles
How to Use the data-* attribute to embed custom dataHTML Global Attributes

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

Reffered: https://www.w3schools.com/tags/att_global_data.asp

 

Horje