FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Attributes

Intermediate

HTML Data Attributes

Learn data-* as part of the HTML attribute system: what they configure, where they belong and which mistakes to avoid.

Data

Data attributes store small custom values in HTML.

Custom data attributes start with data-. They are useful when HTML needs to carry a small piece of state or configuration for JavaScript, analytics, filtering or interaction.

They are not a database and they should not hold secrets. Think of them as simple, readable notes attached to elements.

Attribute group: data-*. Custom data stored in HTML for JavaScript and small interface state.

What belongs here

Learn attributes by purpose, not by memorizing random names.

data-id

Stores a public identifier for JavaScript or analytics.

data-state

Stores a small interface state such as open, active or loading.

data-category

Stores grouping information for filtering or tracking.

dataset

JavaScript reads data-* values through element.dataset.

Syntax in context

Data attribute names start with data-.

Use lowercase names separated with hyphens. JavaScript converts data-user-id to dataset.userId.

<button type="button" data-action="save" data-item-id="42">
  Save lesson
</button>

Good versus weak

Small attribute choices can change behavior, accessibility and security.

Good

<button type="button" data-action="save" data-item-id="42">
  Save lesson
</button>

Weak

<button data-password="secret123" data-big-json="{...lots of data...}">
  Save
</button>

Rules that matter

Use these rules before publishing real HTML.

Keep values public

Anything in HTML can be viewed by the user. Never store secrets in data attributes.

Keep values small

Large JSON blobs make markup noisy and harder to maintain.

Name by purpose

Use data-action or data-state instead of vague names such as data-thing.

Let JavaScript read it

Data attributes are strongest when they connect semantic HTML to behavior.

Production thinking

Attributes are tiny pieces of HTML with real product impact.

Why does this matter?

Data attributes exist for small public values that connect HTML to JavaScript, filtering, analytics or interface state without pretending those values are visible content.

Accessibility

Data attributes do not describe meaning to screen readers. Use semantic HTML and ARIA when users need the information.

Production note

Data attributes are excellent for behavior hooks because they avoid overloading CSS class names with JavaScript meaning.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Change data-state from "ready" to "loading".
  • Add data-course="html" to the button.
  • Run the preview and inspect how the values stay visible in the HTML.

Practice assignment

Do this before moving to the next lesson.

  1. Change one meaningful part of the HTML, not only the visible text.
  2. Run the preview and check whether the result still makes semantic sense.
  3. Explain why the element or attribute you changed belongs in this exact place.

Try it yourself

Data attributes for interface state

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?