data-* Syntax and Naming Conventions
Understand valid data-* attribute names and their purpose.
Review: data-* Attributes
Data attributes (data-*) store custom information on HTML elements:
<div data-user-id="42" data-role="admin" data-active="true">
User Card
</div>Valid Naming Rules
data-* attribute naming requirements:
- Must start with
data- - Followed by at least one character
- Only lowercase letters, digits, hyphens, underscores, periods, colons
- No uppercase letters (HTML parser lowercases attributes)
- No spaces
All lessons in this course
- data-* Syntax and Naming Conventions
- Accessing data-* with dataset in JavaScript
- Using data-* with CSS attribute selectors
- Real-world Patterns Tooltips State Tracking