HTML Data Attributes
Custom data attributes let you attach small pieces of extra information to an element. They start with data-. For example: <button data-product-id="42">Buy</button>. The browser does not give data-product-id a special visual meaning. It simply stores the value on the element. JavaScript can read it later. Use data-* for information that belongs to a particular element and that your code may need. Do not use it as a replacement for normal semantic HTML attributes.
Why this matters
- ·Data attributes connect HTML elements with application data.
- ·They are easy for JavaScript to read.
- ·They keep small custom values close to the element that uses them.
Common mistakes
- ·Do not store large amounts of data in attributes.
- ·Do not put secrets or passwords in data attributes because visitors can see them.
- ·Use real HTML attributes when HTML already provides the meaning you need.
Your codeHTML
Live preview
Frequently asked questions
data-.
Practice questions
Question 1
Add a product id to a button.
Your codeHTML
Live preview
Question 2
Add a category and price to a product card.
Your codeHTML
Live preview
Quick check
Just for this topic answer honestly, then check yourself.
1 / 3