HTML data-* Attribute: This attribute specifies the storage of custom data private to the page or application. The custom attributes allow you to add your own information to tags in HTML. The stored (custom) data can then be used in the page’s JavaScript to create a more engaging user experience.
HTML data-* Attribute
This attribute gives us the ability to embed custom data attributes on all HTML elements. It can be applied to all the HTML elements.
There are three main parts of Data attributes. They are as follows:
- Attribute name: It must be at least one long character, contain no capital letters and prefixed data.
- The attribute value can be any string.
- The attribute name has not hold any uppercase letters
Syntax: <element data-* =”somevalue”>
Browser Support
This attribute is supported by the following browsers:
- Chrome – 4.0
- Firefox – 2.0
- Safari – 3.1
- Opera – 9.6
- Internet Explorer – 5.5
Example: for the data-* attribute to embed custom data
<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(language) {
var languageType = language.getAttribute("data-language-type");
alert("The " + language.innerHTML + " stands for " + languageType + ".");
}
</script>
</head>
<body>
<h1>Programming Languages</h1>
<p>Click on a language to see what it stands for:</p>
<ul>
<li onclick="showDetails(this)" id="HTML" data-language-type="HYPER TEXT MARKUP LANGUAGE">HTML</li>
<li onclick="showDetails(this)" id="CSS" data-language-type="Cascading Style Sheets">CSS
</li>
</ul>
</body>
</html>
Output
