Data attributes in HTML

Custom data on an element, readable from CSS and from scripts.

<ul id="steps">
  <li data-step-index="0" data-stars="3" data-lang="python">
    Variables
  </li>
  <li data-step-index="1" data-stars="1" data-lang="python">
    Strings
  </li>
  <li data-step-index="2" data-stars="0" data-locked="true">
    Flow control
  </li>
</ul>

How it works

1. Any attribute starting data- is valid and yours.
2. Scripts read them through dataset, hyphens becoming camelCase.
3. CSS can select on them, which is how theming hooks work.

The run, in numbers

Lines

11

Characters to type

247

Tokens

61

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 49 seconds.

Type this snippet

Step 2 of 2 in Content that reads, step 14 of 15 in Accessible HTML.

← Previous Next →