HTML data-* Attribute

Definition and Usage

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

data-* The attribute gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can be used by the JavaScript on the page to create a better user experience (without Ajax calls or server-side database queries).

data-* The attribute consists of two parts:

  • The attribute name should not contain any uppercase letters, and there must be at least one character after the prefix "data-"
  • The attribute value can be any string

Note: User agents will completely ignore custom attributes prefixed with "data-".

See also:

HTML Tutorial:HTML attributes

HTML DOM Reference Manual:HTML DOM getAttribute() Method

Example

Embed custom data using the data-* attribute:

<ul>
  <li data-animal-type="bird">Magpie</li>
  <li data-animal-type="fish">Tuna</li>
  <li data-animal-type="spider">Assassin Bug</li>
</ul>

Try It Yourself

Syntax

<element data-*="somevalue">

Attribute Value

Value Description
somevalue Specify the value of the attribute (as a string).

Browser Support

The numbers in the table indicate the first browser version to fully support this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 5.5 2.0 3.1 9.6