0Pricing
HTML Academy · Lesson

Custom Data Attributes data-*

Store custom data directly on elements with data-* attributes.

What Are data-* Attributes?

Custom data attributes let you store extra information directly on HTML elements:

<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>

<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->

Why data-* Exists

Before data-*, developers stored extra data in:

  • Hidden inputs (messy)
  • CSS class names (fragile)
  • Non-standard attributes like rel or title (invalid HTML)

HTML5 formalized data-* as the official way to embed custom data without affecting semantics or presentation.

All lessons in this course

  1. id class style and title
  2. The hidden Attribute
  3. tabindex and accesskey
  4. Custom Data Attributes data-*
← Back to HTML Academy