What are data attributes in HTML5?

Data attributes let you store your own extra information in any HTML element. The name must start with data-.

<button data-product-id="105" data-price="499">Add to cart</button>

<script>
  const btn = document.querySelector("button");
  console.log(btn.dataset.productId);   // 105
  console.log(btn.dataset.price);        // 499
</script>

In JavaScript they are read from element.dataset, and a name like data-product-id becomes productId. They are not shown on the page. See HTML Attributes.

• Previous Interview Question
• Next Interview Question

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.