HTML data-* Attribute

❮ HTML Attributes


<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')); ">


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


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.
❮ HTML Attributes