HTML Reference Manual

HTML Tag Directory

HTML data-*Attribute

data-* Global attributes are a class of attributes called custom data attributes, which give us the ability to embed custom data attributes on all HTML elements and to exchange proprietary data between HTML and scripts (usually JavaScript).

HTML Global Attributes

Online Examples

Use data-* Properties to embed custom data:

Examples

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</p>/title>　
<script>
function showDetails(animal)
{
　　　　var animalType = animal.getAttribute("data-animal-type");
　　　　alert("The "　+　animal.innerHTML　+　" is a "　+　animalType　+　".");
}
</script>
</head>
<body>
<h1>Species</h1>
<p>Click a species to see what type it is:</p>/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>

Test and see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support data-* attribute.

Definition and Usage

data-* The attribute is used to store custom data for the page after the application.

data-* The attribute can embed data in all HTML elements.

Custom data can make the page have a better interactive experience (without using Ajax or querying data on the server).

data-* The attribute consists of the following two parts:

The attribute name should not contain uppercase letters, in data- must have at least one character.
The attribute can be any string

Note: Custom attribute prefix "data-" will be ignored by the client.

HTML 4.01 with HTML5differences

data-* The attribute is HTML5 added.

Syntax

<element data-*="somevalue">

Attribute value

Value	Description
somevalue	Specify attribute value (a string)

HTML Global Attributes

HTML: <template> tag