HTML & CSS reference

data-*

Custom attributes for storing data in markup; the name starts with `data-`.

Syntax

<div data-price="4.5">…</div>

Examples

The data is available in CSS:

<style>
  [data-status="sold-out"] { opacity: 0.4; }
  .item::after { content: " — " attr(data-price); }
</style>
 
<p class="item" data-price="$4.50">Latte</p>
<p class="item" data-price="$3.00" data-status="sold-out">Mocha</p>

…and in JavaScript via dataset:

<button data-drink-id="17" onclick="this.textContent = 'Drink #' + this.dataset.drinkId">Show id</button>

Notes

In JavaScript data-drink-id becomes dataset.drinkId: dashes are removed and the next letter is capitalised. Values are always strings. Do not keep in data attributes anything users or search engines need to see.

Related recipes

How to make a tooltip

In the tutorial

Attributes — How HTML attributes work, the global attributes id, class, title, lang, hidden and style, boolean attributes and data attributes.

Thanks for reading!