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.
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.
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.
button.dataset.action = "update";
Data attributes can be accessed using css using css attribute selector.