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 role where native semantics already exist.
• Overusing inline style—prefer CSS stylesheets.
• Abusing tabindex > 0; keep natural tab order when possible.

Exercises

1. Add lang and dir where needed and verify screen reader language behavior.
2. Replace inline style attributes with a CSS class.