Latest web development tutorials
 

HTML data-* Attribute


Definition and Usage

The data-* attributes is used to store custom data private to the page or application.

The data-* attributes 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-* attributes 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 contextmenu attribute is part of the Global Attributes, 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-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

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