How to Use HTML5 Data Attributes (data-*)? (Practical Examples)

HTML5 data attribute is used to store custom metadata in elements. It starts with data- and is named in lowercase. It can be read with dataset (camel case) or getAttribute (original string). It is suitable for lightweight scenarios such as API ID and UI status. Sensitive data or semantic duplication is disabled.

HTML5 data attributes let you store custom information directly in HTML elements without affecting layout or behavior — and they're easy to access with JavaScript or CSS.

What data attributes look like

They're any attribute that starts with data- , followed by a lowercase name (hyphens allowed, no underscores or capitals). Browsers ignore them by default, but your code can read them anytime.

Example:

How to read data attributes in JavaScript

You can get values ​​using dataset (camelCase) or getAttribute() (exact string).

• element.dataset.userId → "123" (automatically converts data-user-id to userId )
• element.dataset.action → "delete"
• element.getAttribute('data-confirmed') → "false" (returns string — convert manually if needed)

When to use them (and when not to)

Use data attributes for lightweight, element-specific metadata — like IDs for API calls, UI state hints, or analytics triggers.

• ✅ Store a product ID on a “Buy Now” button for later AJAX use
• ✅ Mark which tab is active: <div data-tab="settings"> <li> ✅ Flag content language variants: <code>data-lang="en-US"
• ❌ Don't store large objects or sensitive tokens — use JS variables or secure backend sessions instead
• ❌ Avoid duplicating semantic meaning already covered by standard attributes ( id , class , aria- )

Styling with data attributes in CSS

You can target elements in CSS using attribute selectors — great for theme switches or state-based styling.

Example:

[data-status="pending"] { opacity: 0.7; }
[data-theme="dark"] .card { background: #333; color: #fff; }

This keeps style logic tied directly to markup intent — no extra classes needed.