data-* attributes
tag
HTML5
Custom data attributes that store extra information on HTML elements. Accessible via JS dataset property.
Syntax
<div data-user-id="42" data-role="admin">
Example
html
<button data-product-id="123" data-price="9.99" onclick="addToCart(this)">
Add to Cart
</button>
<script>
function addToCart(btn) {
const id = btn.dataset.productId;
const price = btn.dataset.price;
console.log(`Adding product ${id} ($${price})`);
}
</script>