HTML data-* Attribute
Example
<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
Applies to:
The data-* attribute can be used on the following element:
Element | Attribute |
---|---|
All HTML elements | data-* |
Attribute Values
Value | Description |
---|---|
someValue | Specifies custom data attributes on all HTML elements. |