Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML global attributes: keep id, class, and data-* jobs separate

Last updated: 5 Oct 20266 min read
tutorial
IntermediateBy AITrove Editorial

Global attributes apply across HTML elements, but id, class, and data-* answer different questions.

Use it for a real task

A receipt row needs a fragment target, a styling hook, and a small client-side identifier. The id is unique in this document and can be addressed by a link or label. A class may be shared across many rows. A data attribute carries application state into the DOM, but it must never be trusted as proof of access rights or as the source of record truth.

html
<section id="receipt-r47" class="receipt-card" data-receipt-id="R-47">
  <h2>Receipt R-47</h2>
  <p>Awaiting finance review.</p>
</section>
<a href="#receipt-r47">Jump to receipt R-47</a>

What the markup guarantees

The fragment link reaches an existing id. CSS can select the class, and a script can read the data value if behavior is later added. The server still chooses which receipt is visible; changing a DOM attribute cannot authorize a request.

Cost and limits

These attributes add little markup weight. Duplicate ids, however, break label and fragment relationships; duplicating state in data attributes can also drift from the rendered text.

Common Mistakes

  • Do not repeat an id on several cards.
  • Do not use a class as the target of a label's for attribute.
  • Do not put a secret in data-* because page source is public to the client.

Connected lessons

html
core
Storage details