What are custom data attributes (data-*)?

They allow you to store extra data on HTML elements — useful for scripts or dynamic

behavior.

Example:

<button data-user-id="101" data-role="admin">View Profile</button>

<script>

const btn = document.querySelector("button");

console.log(btn.dataset.userId); // 101

console.log(btn.dataset.role); // admin

</script>

Key Takeaway:

data-* attributes are perfect for embedding small pieces of custom data without affecting

layout.

Follow me on LinkedIn:

Advanced