The data- Attribute
The data- attribute is a way of embedding data in a web page using custom attributes that
are ignored by the browser. They're also private to a page, so shouldn't be used by an ex-
are perfect for adding data to be used either by an external API or as a hook that the program
utilizes to access a particular element on the page.
The names of these attributes can be decided by the developer, but they must use the follow-
• start with data-
• contain only lowercase letters
• include an optional string value
Examples could be:
data-toppings="ham & pineapple"
The information contained in the attributes can be used to identify particular elements; for
example, all the elements with an attribute of data-calendar could be identified as cal-
endar widgets. The values of the attributes can also be used to filter different elements; for
example, we could find all the elements that have a data-rating value of 3 or more.
Each element has a dataset property that can be used to access any data- attributes it
contains. Here's an example of some markup:
<div id="pizza" data-toppings="cheese, tomato, mushroom">
Vegetable Deluxe Pizza
Search WWH ::