HTML5 data-* Attributes: From jQuery Convenience to Framework Architecture

In 2016, I answered a question on Stack Overflow in Portuguese about HTML5 data-* attributes. The question scored 6 upvotes. At the time, most developers either didn’t know about them or relied on jQuery’s .data() method to access them without thinking about how they actually worked.

The 2016 Answer: Storing Data in Markup

data-* attributes let you store custom data directly on HTML elements without using non-standard attributes or hidden inputs:

<button data-user-id="42" data-action="delete" data-confirm="Are you sure?">Delete User</button>

The data- prefix tells the browser (and validators) this is custom data, not an official HTML attribute.

Reading with jQuery (the 2016 approach):

$('button').on('click', function () {
  var userId = $(this).data('user-id'); // '42' (camelCase conversion)
  var action = $(this).data('action');
  // ...
});

Reading with vanilla JS:

button.addEventListener('click', () => {
  const userId = button.getAttribute('data-user-id');
  // or via dataset:
  const userId2 = button.dataset.userId; // camelCase key
});

The dataset API was the modern approach even in 2016 — it’s a DOMStringMap where data-user-id becomes dataset.userId and data-some-thing becomes dataset.someThing.

The 2026 Reality: data-* as Framework Architecture

In 2026, data-* attributes are the foundation of entire frameworks, not just a convenience for storing metadata.

Alpine.js uses them as its entire API:

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open">Content</div>
</div>

htmx uses them to add AJAX behavior directly in HTML:

<button hx-post="/api/delete" hx-target="#result" hx-confirm="Are you sure?">Delete</button>

Both frameworks chose data-* attributes (or x- / hx- prefixed attributes following the same convention) because the data lives with the element it controls. No separate JavaScript file needed for simple interactions.

Key Takeaway

data-* attributes shifted from “jQuery convenience for storing IDs” to “the markup layer of a progressively enhanced web.” They’re the bridge between HTML and behavior — and in 2026, entire frameworks are built on that bridge.