Html Data Attributes — Free Html Tutorial

TL;DR: Learn Html Data Attributes in Html with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Html Data Attributes in Html

data-* attributes store custom data on elements. Example: <div data-user-id="123" data-role="admin">.

Access with JavaScript: element.dataset.userId or element.getAttribute("data-user-id").

Great for storing metadata without changing element behavior.

<div id="user" data-id="42" data-name="Priya" data-role="student">
  User Info
</div>

<script>
  const user = document.getElementById('user');
  console.log(user.dataset.id);      // "42"
  console.log(user.dataset.name);    // "Priya"
  console.log(user.dataset.role);    // "student"
</script>

Learn Html Data Attributes step by step with Syllab's free interactive Html tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full Html course →