📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › HTML Fundamentals › Data Attributes

Data Attributes

4 min read
Store custom data on elements with data-* attributes: data-user-id='42'. Access in JavaScript with element.dataset.userId. This keeps HTML and JavaScript loosely coupled without global variables or hidden inputs.

Custom Data Attributes

<!-- HTML -->
<li data-id="42" data-category="tech" data-price="9.99">Item</li>

<!-- JavaScript -->
const li = document.querySelector("li");
console.log(li.dataset.id);       // "42"
console.log(li.dataset.category); // "tech"
console.log(li.dataset.price);    // "9.99"