Data Attributes
HTML5 introduced data attributes — a way to store custom data directly on HTML elements. They start with data- followed by any name you choose. JavaScript reads them instantly without any extra variables.
Storing Data on Elements
Example — data- on a Card
<div class="lesson-card" data-lesson-id="6" data-xp="20" data-completed="false"> <h3>Images and Media</h3> </div>
data-lesson-id="6" • data-xp="20" • data-completed="false"
Images and Media
Data attributes are invisible to the user but readable by JavaScript and CSS instantly.
Reading with JavaScript
Example — dataset in JavaScript
<button id="buy" data-product-id="PRD-001" data-price="11" data-name="Chai Support"> Buy Now </button> <script> var btn = document.getElementById('buy'); btn.addEventListener('click', function() { // data-product-id becomes dataset.productId (camelCase) var id = btn.dataset.productId; var price = btn.dataset.price; var name = btn.dataset.name; alert(name + ' Rs.' + price); }); </script>
data-product-id becomes dataset.productId — hyphens auto-convert to camelCase in JavaScript.
CSS Attribute Selectors
Example — Style by Data Value
<style> [data-status="active"] { background: green; color: white; } [data-status="pending"] { background: orange; color: black; } [data-status="error"] { background: red; color: white; } </style> <span data-status="active">Active</span> <span data-status="pending">Pending</span> <span data-status="error">Error</span>
Active
Pending
Error
CSS attribute selectors [data-status="active"] style elements based on their data values — no extra classes needed.
Data AttributesRules and Usage
NamingMust start with data- then any lowercase letters with hyphens. e.g. data-user-id
ValuesAlways strings in HTML. Use parseInt() or parseFloat() in JS to convert numbers
datasetAccess via element.dataset.yourName. Hyphens auto-convert to camelCase
setAttributeelement.setAttribute('data-key', value) to write from JavaScript
Use casesProduct IDs, tooltip content, tab switching, filter values, analytics tracking
Real World Uses
Data attributes power shopping cart item IDs, tooltip content, animation triggers, tab switchers, and click tracking in analytics — all without adding extra JavaScript variables or hidden inputs.
Before data- Attributes
Before HTML5, developers stored custom data in rel attributes, hidden form inputs, or class names like class="product-id-123". HTML5 data attributes made this clean and officially standardized in 2014.