HTML data-* Attribute Full
Definition and Usage
The data-*
attribute is used to store custom data private to the page or application.
The data-*
attribute 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-*
attribute 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.
Applies to
The data-*
attribute is a Global Attribute, and can be used on any HTML element.
Element | Attribute |
---|---|
All HTML elements | data-* |
Example
Example
Use the data-* attribute to embed custom data:
<ul>
<li data-life-type="world">Love</li>
<li data-life-type="world">Life</li>
<li data-life-type="world">World</li>
</ul>
<li data-life-type="world">Love</li>
<li data-life-type="world">Life</li>
<li data-life-type="world">World</li>
</ul>
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Attribute | |||||
---|---|---|---|---|---|
data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
Comments
Post a Comment