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:

  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.

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>

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