What are data attributes in HTML5 and how are they used?

Data attributes in HTML5 are custom attributes that can be added to HTML elements to store extra information or metadata about the element. They are prefixed with "data-" followed by a descriptive name, allowing developers to define their own attributes without conflicting with standard HTML attributes or affecting the element's functionality. Data attributes can be useful for various purposes, such as storing additional data for JavaScript manipulation, providing configuration options, or associating data with specific elements.

Here's an example of a data attribute in HTML:


<button id="myButton" data-action="delete" data-item-id="123">Delete</button>

In the above example, the `<button>` element has two data attributes: `data-action` and `data-item-id`. The values assigned to these attributes, `"delete"` and `"123"`, respectively, can be any valid string or number. JavaScript Access: To access the data attributes using JavaScript, you can use the `dataset` property, which provides access to all the data attributes of an element. Here's how you can access the data attributes in the above example:


var button = document.getElementById("myButton");
var action = button.dataset.action; // "delete"
var itemId = button.dataset.itemId; // "123"

The `dataset` property returns an object that represents all the data attributes of an element. The names of the data attributes are converted to camel case when accessing them as properties. Data attributes can also be manipulated and updated dynamically using JavaScript. For example, you can change the value of a data attribute like this:


button.dataset.action = "update";

CSS Access: Data attributes can be accessed using css using css attribute selector.


button[data-action="delete"] {
  color: red;
}

Conclusion: Data attributes provide a flexible way to store custom data associated with HTML elements, making it easier to access and manipulate that data using JavaScript. They are particularly useful when you need to attach additional information to elements for scripting or styling purposes.