HTML Global Attributes
Universal attributes that can be used with any HTML element
🌐 What are Global Attributes?
Global attributes are attributes that can be used with any HTML element. They provide common functionality like styling, identification, and accessibility features.
<!-- Global attributes can be used on any element -->
<div id="container" class="main" title="Main container">
<p lang="en" dir="ltr">English text</p>
<span hidden>Hidden content</span>
</div>
Core Global Attributes
id
Unique identifier for the element
<div id="header">Header</div>class
CSS class names for styling
<p class="text-large bold">Text</p>style
Inline CSS styling
<span style="color: red;">Red</span>title
Tooltip text on hover
<button title="Click to save">Save</button>🔹 Language and Direction Attributes
Attributes for internationalization and text direction:
<!-- Language specification -->
<html lang="en">
<p lang="es">Hola mundo</p>
<p lang="fr">Bonjour le monde</p>
<!-- Text direction -->
<p dir="ltr">Left to right text</p>
<p dir="rtl">Right to left text</p>
<!-- Translation hint -->
<p translate="no">Brand Name</p>Output:
Hola mundo
Bonjour le monde
Left to right text
Right to left text
Brand Name
🔹 Accessibility Attributes
Attributes that improve accessibility for screen readers:
<!-- ARIA labels -->
<button aria-label="Close dialog">×</button>
<div aria-describedby="help-text">Input field</div>
<p id="help-text">Enter your full name</p>
<!-- Tab navigation -->
<button tabindex="1">First</button>
<button tabindex="2">Second</button>
<button tabindex="-1">Skip in tab order</button>Output:
Enter your full name
🔹 Data and Content Attributes
Attributes for storing custom data and controlling content:
<!-- Custom data attributes -->
<div data-user-id="123" data-role="admin">User Info</div>
<button data-action="delete" data-confirm="true">Delete</button>
<!-- Content control -->
<div contenteditable="true">Editable text</div>
<p hidden>Hidden paragraph</p>
<details>
<summary>Click to expand</summary>
<p>Hidden content here</p>
</details>Output:
Click to expand
Hidden content here