What are data-* attributes used for?

The Purpose of data-* Attributes in HTML

data-* attributes in HTML are custom attributes that let you store extra information (metadata) on standard HTML elements. They are not displayed to the user, but can be easily accessed in JavaScript using the dataset property. This makes them useful for attaching extra data to elements without cluttering the DOM with hidden elements or non-standard attributes.

Example of Using data-* Attributes

Key Points About data-* Attributes

1
data-* lets you create custom attributes on HTML elements.
2
They must begin with data- followed by a name (e.g., data-user-id).
3
JavaScript can access them via element.dataset (e.g., element.dataset.userId).
4
Useful for passing configuration, IDs, or small bits of data to scripts.