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
Visuals: captured from real browser rendering
<article class="data-card" data-status="ready" data-owner="ops">
  <h2>Deploy window</h2>
  <button data-action="approve">Approve</button>
</article>

  1. Create the deploy card element.

    A deploy card container appears.
    The article remains semantic content even while it carries custom data.

  2. Store the card status.

    The card shows a ready status badge.
    A data attribute stores a custom state value in valid HTML.

  3. Store the owning team.

    The card state records ops as the owner.
    Multiple data attributes can describe the same element.

  4. Add the Approve button.

    An Approve action appears inside the card.
    Buttons can carry both visible text and custom action metadata.

  5. Store the button action name.

    The action button is marked with approve metadata.
    Scripts can read dataset.action without changing the visible label.
data-* data-* attributes store custom values that remain valid HTML.
dataset Scripts can read data attributes through an element dataset.