HTML5 data-* Attributes

Sometimes you need to attach extra data to an element — like an ID, type, status, or anything custom — without affecting its appearance or meaning. That’s exactly what data-* attributes were built for.

Data attributes let you embed custom data into any HTML element using the syntax data-name="value". This data doesn't show on the page but is accessible through JavaScript, making it perfect for dynamic UI logic.

<div id="fruitBox" data-fruit="apple" data-color="red">
  Click me to reveal the fruit!
</div>

<script>
  const box = document.getElementById("fruitBox");
  box.addEventListener("click", () => {
    const fruit = box.dataset.fruit;
    const color = box.dataset.color;
    alert("You clicked a " + color + " " + fruit);
  });
</script>

[ Clicking the box shows “You clicked a red apple” ]

Each data-* attribute becomes a property on the dataset object. The name after data- becomes camelCased.

<div data-fruit-type="banana" data-ripeness-level="high" id="bananaBox"></div>

<script>
  const bananaBox = document.getElementById("bananaBox");
  const type = bananaBox.dataset.fruitType;
  const ripeness = bananaBox.dataset.ripenessLevel;
  console.log(type, ripeness); // banana, high
</script>

You can also update or add new data attributes via JavaScript:

bananaBox.dataset.ripenessLevel = "medium";
bananaBox.dataset.source = "farm42";

• Storing product IDs in e-commerce listings
• Attaching metadata to list items, cards, or rows
• Passing config or state to JavaScript logic
• Identifying user-selected items like apples, bananas, cherries 🍎🍌🍒

• Use lowercase and hyphens in HTML (e.g., data-user-id)
• Use camelCase to access in JavaScript (dataset.userId)
• Don’t abuse data attributes to store large or sensitive data
• Keep them semantic and purposeful — they’re not just for “hacks”

<button data-fruit="cherry" data-favorite="false" onclick="toggleFavorite(this)">
  Cherry 🍒 - Favorite: No
</button>

<script>
function toggleFavorite(btn) {
  const isFav = btn.dataset.favorite === "true";
  btn.dataset.favorite = !isFav;
  btn.innerText = `${btn.dataset.fruit} 🍒 - Favorite: ${!isFav ? "Yes" : "No"}`;
}
</script>

[ Clicking the button toggles favorite state dynamically ]

HTML5 data attributes offer a clean and flexible way to embed extra information into HTML — information that JavaScript can act upon. You’ve learned how to:

• Add custom data-* attributes to any element
• Access and update those attributes with dataset
• Use them for clean, maintainable dynamic behaviors

Choose the option that lists all and only the correct statements.

1. <div data-student-id='12345'></div>
2. <input data-phone-number='9876543210' />
3. <span data-user='user@example.com'>
4. <button data-click='true'>Click Me</button>

Choose the option that lists all and only the correct statements.

1. Use descriptive and meaningful names for data attributes
2. Avoid storing sensitive information in data attributes
3. Keep data values small to optimize page performance
4. Use data attributes to style elements directly with CSS

Next up: Let’s build a dynamic component (like a fruit filter or quiz) entirely powered by data-* attributes and JavaScript — no backend needed.