Global Attributes in HTML
? Global Attributes in HTML
Global attributes are attributes that can be applied to almost any HTML element to provide common functionality or behavior.
Common Global Attributes
| Attribute | Description | Example |
|---|---|---|
id | Unique identifier for the element | <div id="header"></div> |
class | One or more class names for styling or scripting | <p class="intro highlight"></p> |
style | Inline CSS styles | <h1 style="color:blue;">Hello</h1> |
title | Tooltip text shown on hover | <abbr title="Hypertext Markup Language">HTML</abbr> |
hidden | Hides the element (not displayed) | <div hidden>This is hidden</div> |
data-* | Custom data attributes accessible via JavaScript | <div data-user="123"></div> |
tabindex | Controls keyboard navigation order | <button tabindex="1">Click me</button> |
contenteditable | Makes element editable by user | <div contenteditable="true">Edit me</div> |
spellcheck | Enables or disables spell checking | <textarea spellcheck="false"></textarea> |
draggable | Defines if an element can be dragged | <img src="img.png" draggable="true"> |
Example Using Global Attributes
<div id="main" class="container" style="background-color: lightgray;" title="Main container" data-user="42" tabindex="0"> <p contenteditable="true">Edit this text!</p></div>Why Global Attributes?
Promote consistency
Enable interactivity and accessibility
Provide hooks for CSS and JavaScript
Want examples on how to use data-* attributes in JavaScript or how tabindex helps accessibility?
