Latest web development tutorials

HTML data- * attributes

HTML Global Attributes HTML Global Attributes

Examples

Use data- * attributes 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"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

All major browsers support data- * attributes.


Definition and Usage

data- * attribute is used to store private page after you apply custom data.

data- * attribute data can be embedded in any HTML element.

Custom data can make the page have a better interactive experience (no need to use Ajax or query data to the server).

data- * attribute consists of two parts:

  1. Do not include the property name in capital letters, in the data- must have at least one character.
  2. This property can be any string

Note: Custom attribute prefix "data-" will be ignored by the client.


Differences between HTML 4.01 and HTML5

HTML5 data- * attributes are added.


grammar

<Element data - * = "somevalue">

Property Value

value description
somevalue Specified attribute value (a string)


HTML Global Attributes HTML Global Attributes