Hiprup

What are data attributes (data-*)?

Data attributes (data-*) let you store custom data directly on HTML elements, readable from JavaScript.

  • Define — any attribute starting with data-, e.g. data-user-id.

  • Read / write — access via element.dataset (camelCased), so data-user-id becomes dataset.userId.

Handy for attaching state to elements (IDs, config) without separate lookups — common in event delegation.

<!-- HTML -->
<div id="user" data-user-id="42" data-role="admin" data-is-active="true">
  John Doe
</div>

// JavaScript
const el = document.getElementById('user');

// Read
console.log(el.dataset.userId);    // '42' (kebab -> camelCase)
console.log(el.dataset.role);      // 'admin'
console.log(el.dataset.isActive);  // 'true' (always strings!)

// Write
el.dataset.score = '95';  // Adds data-score="95"

// In event delegation
document.querySelector('ul').addEventListener('click', (e) => {
  const id = e.target.dataset.itemId; // Read from clicked element
  if (id) deleteItem(id);
});

data-user-id in HTML becomes dataset.userId in JS (kebab-case to camelCase). Values are always strings. dataset.score = '95' adds a new data attribute.

Event delegation reads data attributes from the clicked element to identify which item was clicked.

data-* attributes are custom HTML data. dataset in JS converts kebab-case to camelCase. Values are always strings (parse with parseInt/JSON.parse if needed).

The event delegation pattern (reading data-id from clicked element) is the most practical use.

What are data attributes (data-*)? | Hiprup