Created by Dhruv Mahant
Last updated: yesterday at 4:51 PM
1 min readSee how many people viewed this page
| Value | Description |
|---|---|
| somevalue | entry denotes the purpose of the attribute, specifying its value as a string. |
Compatibility with Older Browsers:
Data attributes were introduced with HTML5, a standard widely supported by modern browsers. However, older browsers predating HTML5 do not recognize these data attributes.
According to HTML specifications, attributes unrecognized by the browser should be left untouched, and the browser will simply disregard them during page rendering.
Web developers have leveraged this aspect to create non-standard attributes, which are attributes not defined in HTML specifications. For instance, consider the value attribute in the following <img> tag:
<img src="img.jpg" value="imgValue" />
Since the <img> tag specifications do not include a value attribute, and it’s not a global attribute, value is considered a non-standard attribute.
Despite the lack of support in older browsers, data attributes still function as intended. You can both set and retrieve them using generic JavaScript methods like setAttribute and getAttribute. However, the newer dataset property, available in modern browsers, cannot be utilized in older ones.
Use Of Data Attributes:
You can create custom data attributes in HTML5 using the data-* syntax. These attributes provide a handy way to store data within HTML elements, which can then be accessed and manipulated using JavaScript. For instance:
<div data-submitted="yes" class="class1"> ... content ... </div>
In this example, we’ve assigned a custom data attribute data-submitted with a value of "yes" to a <div> element with the class class1. The data-* structure allows you to name the attribute after the data- part, making it accessible for retrieval or modification via JavaScript.