Data Attributes
Data attributes (data-*) store custom data in HTML elements. JavaScript reads them via dataset property.
They provide a clean bridge between HTML structure and JavaScript behavior without using class names for logic.
HTML
Intermediate
4 min read
HTML Data Attributes
Example
<button data-action="delete" data-id="42" data-confirm="Are you sure?">
Delete Item
</button>
<script>
document.querySelectorAll("[data-action]").forEach(el => {
el.addEventListener("click", () => {
if (confirm(el.dataset.confirm)) {
deleteItem(el.dataset.id);
}
});
});
</script> Pro Tip
Use data attributes to pass configuration to JavaScript without polluting class names or global variables.