# data-* Attributes — HTML Fundamentals: Structure, Forms and Accessibility

Source: https://www.skillbyai.com/en/html/html-data-attributes

> Store small pieces of app state on elements with data-* attributes and read them through dataset.

## Custom attributes

Any `data-*` attribute is valid HTML and readable from JavaScript via `dataset`.

```html
<li data-id="42" data-status="done">Buy milk</li>

<script>
  const li = document.querySelector('li');
  console.log(li.dataset.id);     // "42"
  console.log(li.dataset.status); // "done"
</script>
```

## When to use it

Great for attaching small pieces of app state to markup — IDs, flags, config — without inventing new HTML tags.