HTML data-*Attribute
Examples
Use the data-* attribute to embed custom data:
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
Try it Yourself »
Browser Support
All major browsers support the data-* attribute.
Definition and Usage
The data-* attribute is used to store custom data that is private to the page or application.
The data-* attribute can embed data in all HTML elements.
Custom data allows the page to have a better interactive experience (without needing to use Ajax or query data from the server).
The data-* attribute consists of the following two parts:
- The attribute name must not contain uppercase letters, and must have at least one character after data-.
- The attribute can be any string.
Note:The custom attribute prefix "data-" will be ignored by the client.
Differences Between HTML 4.01 and HTML5
The data-* attribute is new in HTML5.
Syntax
<element data-*="somevalue">
Attribute Values
| Value | Description |
|---|---|
| somevalue | Specifies the attribute value (a string). |
HTML Global Attributes Other Extensions