data-* HTML Attribute

The "data-" attribute in HTML is a special type of attribute that allows developers to store custom data private to the page or application, on standard HTML elements. The "data-" prefix indicates that the attribute is a custom data attribute, and the "" is a placeholder for any name that the developer chooses.

For example, in the following code snippet, the data-price attribute is added to a button element:


<button data-price="20">Buy Now</button>

The data stored in these attributes is not intended to be seen by the user and does not affect the presentation or behavior of the page, it's intended to be used by the developers and scripts. However, you can use JavaScript to access the data stored in these attributes, allowing you to create dynamic and interactive websites.

For example, you can use JavaScript to read the data-price attribute and use it to calculate the total price of the items in a shopping cart.

It's worth noting that the data-* attributes are widely supported by all modern browsers, and also, they don't affect the validation of the HTML document.

In summary, the "data-" attribute in HTML is a special type of attribute that allows developers to store custom data on standard HTML elements. The "data-" prefix indicates that the attribute is a custom data attribute, and the "" is a placeholder for any name that the developer chooses. The data stored in these attributes is not intended to be seen by the user and does not affect the presentation or behavior of the page, it's intended to be used by the developers and scripts. They are widely supported and don't affect the validation of the HTML document.