HTMLEasy

What are data-* attributes used for?

#html#javascript

Answer

They store valid custom data directly on an element, readable via dataset or CSS.

html

<button data-product-id="42" data-state="idle">Buy</button>

js

btn.dataset.productId; // "42" (kebab-case -> camelCase)
btn.dataset.state = "loading";

css

button[data-state="loading"] { opacity: 0.6; pointer-events: none; }

Values are always strings. Never put sensitive data there - it is visible in the DOM.

HTMLEasy

#html#javascript

They store valid custom data directly on an element, readable via dataset or CSS.

html

<button data-product-id="42" data-state="idle">Buy</button>

js

btn.dataset.productId; // "42" (kebab-case -> camelCase)
btn.dataset.state = "loading";

css

button[data-state="loading"] { opacity: 0.6; pointer-events: none; }

Values are always strings. Never put sensitive data there - it is visible in the DOM.