HTML Data Attributes

Storing custom values on elements with `data-*` attributes and putting them to work from CSS and JavaScript.

Content tagged data-attributes

• Tutorial:HTML Attributes as Real CSS Values with Typed attr()

  Read HTML attributes as CSS colours, lengths and numbers.

  Typed attr() reads an HTML attribute as a real CSS value — type(<color>), type(<integer>), a unit like % or px, or raw-string — for any property on any element, not just text in content. Covers fallbacks for missing or invalid values, patterns for layout, transitions and view transitions, safe fallbacks in browsers without support, and when a custom property is the better choice.

• Tutorial:CSS-Only Tooltips with attr() and content

  Styled, keyboard-friendly tooltips from one HTML attribute — no JavaScript.

  Build CSS-only tooltips that read their text from an HTML attribute with content: attr() — positioned with a ::after pseudo-element, given an arrow, revealed on hover and keyboard focus, flipped below the element and kept gentle under reduced motion — plus the accessibility limits and pitfalls to know before shipping one.