HTML - Global Attributes
Overview
Estimated time: 25–35 minutes
Global attributes apply to most elements and control identity, semantics, accessibility, and behavior hooks.
Examples
<div id="card" class="product" title="Product card" lang="en">...</div>
<button class="btn" role="button" aria-pressed="false">Toggle</button>
<p dir="rtl">مثال</p>
<div data-user-id="42" data-state="draft">...</div>
Common Pitfalls
- Misusing rolewhere native semantics already exist.
- Overusing inline style—prefer CSS stylesheets.
- Abusing tabindex> 0; keep natural tab order when possible.
Exercises
- Add langanddirwhere needed and verify screen reader language behavior.
- Replace inline styleattributes with a CSS class.