Syntax
<button data-product-id="42">Choose</button>
element.dataset.productIdExamples
Custom Data Attributes and dataset: working example
Save as an HTML file and open it in a browser. Expected result: Clicking Show price displays 42: £12.50.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Working example</title>
</head>
<body>
<button id="product" data-product-id="42" data-price="12.5">Show price</button>
<output id="price"></output>
<script>
const button = document.querySelector("#product");
button.addEventListener("click", () => {
const amount = Number(button.dataset.price);
document.querySelector("#price").textContent = `${button.dataset.productId}: £${amount.toFixed(2)}`;
});
</script>
</body>
</html>- Expected result: Clicking Show price displays 42: £12.50.
- data-product-id is read as dataset.productId.
- dataset values are strings; Number explicitly converts the price before numeric formatting.
Best practices
- Use visible text or semantic attributes for information users need.
- Never store secrets in data attributes; validate values before trusting them.
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
data attributes
Desktop
- Chrome
- Supported
From 7 - Firefox
- Supported
From 6 - Safari
- Supported
From 5.1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 5 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 6 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 7
Firefox
- From 6
Safari
- From 5.1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 5
Chrome for Android
- From 18
Firefox for Android
- From 6
Samsung Internet
- From 1.0
HTMLElement.dataset
Desktop
- Chrome
- Supported
From 7 - Firefox
- Supported
From 6 - Safari
- Supported
From 5.1 - Edge
- Supported
From 12 - Opera
- Supported
From 11
Mobile
- Safari on iOS
- Supported
From 5 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 6 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 7
Firefox
- From 6
Safari
- From 5.1
Edge
- From 12
Opera
- From 11
Safari on iOS
- From 5
Chrome for Android
- From 18
Firefox for Android
- From 6
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.