What are Global Attributes? (Attributes that work on ANY HTML tag)
These attributes can be used on ANY HTML element — <p>, <div>, <h1>, even <body>.
Complete list of global attributes:
Attribute | What it does | Example | When to use |
|---|---|---|---|
| Unique name (only ONE element can have this) |
| To identify a specific element (for CSS or JavaScript) |
| Group name (many elements can share) |
| To style multiple elements the same way |
| Inline CSS |
| For one-time specific styling (avoid when possible) |
| Tooltip when you hover |
| To provide additional information |
| Store custom data for JavaScript |
| To store extra data without showing it |
| Hide the element from page |
| To temporarily hide content |
| User can edit the content |
| For editable content (like a text editor) |
| Tab order (keyboard navigation) |
| To control keyboard navigation order |
| Language of the element |
| For multilingual websites |
| Enable/disable spell check |
| For text inputs |
| Allow dragging |
| For drag-and-drop features |
Examples with explanations:
1<!-- id: unique identifier - only one element can have this -->
2<div id="main-content">This is the main content</div>
3<!-- CSS: #main-content { color: red; } -->
4<!-- JavaScript: document.getElementById('main-content') -->
5
6<!-- class: group identifier - many elements can share this -->
7<p class="error">First error message</p>
8<p class="error">Second error message</p>
9<!-- CSS: .error { color: red; } -->
10
11<!-- data-*: store custom data for JavaScript -->
12<button data-product-id="456" data-price="29.99" onclick="addToCart(this.dataset.productId)">
13 Add to Cart
14</button>
15
16<!-- contenteditable: user can edit! -->
17<div contenteditable="true">Click and edit this text!</div>
18
19<!-- hidden: not visible -->
20<p hidden>This text is hidden</p>
21
22<!-- title: shows tooltip on hover -->
23<p title="This is a tooltip - hover to see">Hover your mouse over me</p>