HTML Global Attributes – Explained
Global attributes are HTML attributes that can be applied to any HTML element, regardless of its type, unless the element specifically does not allow it.
They are used to control behavior, style, identification, and accessibility of elements.
1. Common HTML Global Attributes
| Attribute | Description | Example |
|---|---|---|
id | Unique identifier for an element. | <p id="intro">Welcome</p> |
class | Assigns one or more class names for styling or scripting. | <div class="box"></div> |
style | Inline CSS styling. | <h1 style="color:red;">Hello</h1> |
title | Tooltip text when hovered over. | <abbr title="HyperText Markup Language">HTML</abbr> |
lang | Defines the language of content. | <p lang="en">Hello</p> |
dir | Text direction (ltr or rtl). | <p dir="rtl">مرحبا</p> |
hidden | Hides the element from display. | <p hidden>Secret text</p> |
tabindex | Controls keyboard tab navigation order. | <input type="text" tabindex="1"> |
accesskey | Defines a shortcut key. | <button accesskey="s">Save</button> |
draggable | Allows an element to be dragged (true/false). | <img src="pic.jpg" draggable="true"> |
contenteditable | Makes element text editable. | <p contenteditable="true">Edit me</p> |
spellcheck | Enables spell-checking. | <textarea spellcheck="true"></textarea> |
translate | Indicates if content should be translated. | <p translate="no">BrandName</p> |
data-* | Custom data attributes for JavaScript. | <div data-user-id="123"></div> |
2. Example Using Global Attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global Attributes Example</title>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<h1 id="main-title" class="highlight" title="Main heading">
Welcome to HTML
</h1>
<p contenteditable="true" spellcheck="true">
You can edit this text.
</p>
<button accesskey="c" onclick="alert('Button clicked!')">
Click Me (Alt + C)
</button>
<div data-user-id="42">
Custom data example
</div>
</body>
</html>
3. Notes
- All global attributes can be used in HTML5 unless otherwise stated.
- Some global attributes are important for accessibility (
lang,title,tabindex). data-*attributes are especially useful for passing extra information to JavaScript without displaying it.
