Reusable and Interactive Markup

Data Attributes

Store Page-Specific State

A deploy card stores status, owner, and action metadata with data attributes while keeping visible content readable.

Program

data-* attributes are global HTML attributes. They let markup carry page-specific values without inventing invalid attributes.

data_attributes.html 
<article class="data-card" data-status="ready" data-owner="ops">
  <h2>Deploy window</h2>
  <button data-action="approve">Approve</button>
</article>
data-* data-* attributes store custom values that remain valid HTML.
dataset Scripts can read data attributes through an element dataset.