HTML Global data-* (Custom Data Attributes) Attribute

<p id="p1" data-userName="John Doe">This is a data-* example</p>

<input type="button" value="Show name" onclick="alert(document.getElementById('p1').getAttribute('data-userName')); ">

Meaning

The data-* HTML5 defines a standard way to include developer defined data attributes in elements.

It is often used by script.

The general idea is to use the prefix data- and then pick a variable name to include some nonvisual data on a element.

Value can be get by DOM getAttribute() method.

Note: Special characters, particularly colons, should not be used in the data- names here.

Tip: Try to keep the names lowercase.

Standard Syntax

<element data-*="someValue">

Browser Support

Status

Attribute Values