data-* attributes
Custom data-* attributes store private application data on elements, accessible via the dataset API and CSS.
Syntax
data-key="value"Examples
<button data-product-id="42" data-price="9.99">Buy</button>
<script>
const b = document.querySelector('button');
console.log(b.dataset.productId, b.dataset.price);
</script>
Output
Logs "42 9.99"; data-product-id maps to dataset.productId via camelCase conversion.
Notes
Names must be lowercase and hyphen-separated; they become camelCase on element.dataset. Readable in CSS with attr() and attribute selectors. Do not use for sensitive data; it is visible in the DOM.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 8.0 |
| firefox | 6.0 |
| safari | 6.0 |
| edge | 12 |