HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML data-* Attributes

HTML Global Attributes HTML Global Attributes

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

Internet Explorer Firefox Opera Google Chrome Safari

The data-* attributes are supported in all major browsers.


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.


Differences Between HTML 4.01 and HTML5

The data-* attributes are new in HTML5.


Syntax

<element data-*="somevalue">

Attribute Values

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


HTML Global Attributes HTML Global Attributes

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE