HTML Global Attributes Reference
Global Attributes are properties that can be used on all HTML tags. They define an element's identity, style, behavior, language, and interaction methods.
What Are Global Attributes
Global attributes are universal attributes defined in the HTML specification that can be applied to any HTML elements (including root elements like <html>, <head>, and <body>). They provide consistent semantic and behavioral control across all tags. Understanding and using global attributes proficiently is key to writing semantic, accessible, and maintainable HTML.
Most Commonly Used Global Attributes
The following four global attributes are the most frequently used in daily development:
id— A unique identifier for an element, must not be duplicated on the same page. Used for CSS selectors, JavaScriptgetElementById(), and anchor links.class— A space-separated list of class names, used for CSS and JavaScript selectors. An element can have multiple classes.style— Inline CSS styles written directly on the tag. Has higher priority than external stylesheets.title— Tooltip text displayed on hover. Especially useful for<abbr>,<iframe>, and similar elements.
Example
HTML
<!-- id — unique identifier -->
<div id="header">Website Header</div>
<!-- class — class names -->
<p class="highlight important">This text has both highlight and important styles applied</p>
<!-- style — inline styles -->
<span style="color: red; font-weight: bold;">Bold red text</span>
<!-- title — hover tooltip -->
<abbr title="HyperText Markup Language">HTML</abbr> is a web markup language.
Language and Direction
These two attributes are critical for declaring the language and reading direction of page content, and are very important for SEO and accessibility:
lang— Declares the language of element content, e.g.,lang="en"(English),lang="zh-CN"(Simplified Chinese)dir— Text direction:ltr(left-to-right, default),rtl(right-to-left, for Arabic/Hebrew)
Example
HTML
<!-- Declare the page's primary language as English -->
<html lang="en">
<!-- Body text in English -->
<p lang="en">Welcome to our website!</p>
<!-- Right-to-left Arabic text -->
<p dir="rtl" lang="ar">مرحبا بالعالم</p>
ℹ️ Note: The
lang attribute is crucial for SEO (search engines can accurately identify content language) and screen readers (which select the correct speech synthesis engine). Make it a habit to set lang on the <html> tag.
Data Attributes (data-*)
The data-* attribute allows you to store custom data on HTML elements, which JavaScript can read via the dataset API. Note that * must start with a lowercase letter and cannot contain uppercase letters:
HTML
<!-- Use data-* to store product information -->
<div class="product" data-id="1001" data-name="Wireless Mouse" data-price="99.00" data-stock="true">
<h3>Wireless Mouse</h3>
<p>Price: $99.00</p>
<button onclick="addToCart(this)">Add to Cart</button>
</div>
<script>
function addToCart(btn) {
const product = btn.closest('.product');
const id = product.dataset.id;
const name = product.dataset.name;
const price = product.dataset.price;
console.log('Added to cart:', id, name, price);
alert(`Added "${name}" to cart, price: $${price}`);
}
</script>
Interactive Attributes
These attributes control element visibility, focus order, and editing behavior:
hidden— Hides an element (equivalent todisplay: none), the element takes up no spacetabindex— Tab key navigation order:tabindex="0"focuses in document order,-1makes it unfocusablecontenteditable— Makes element content editable; set totrueto enablespellcheck— Enables or disables spell checking:true/false
Example
HTML
<!-- hidden — hides invisible info -->
<div hidden>This message is not visible to users</div>
<!-- tabindex controls focus order -->
<input type="text" tabindex="2" placeholder="Focused second">
<input type="text" tabindex="1" placeholder="Focused first">
<!-- contenteditable enables in-page editing -->
<div contenteditable="true" style="border:1px solid #ccc; padding:10px; border-radius:4px;">
This text can be edited directly in the browser!
</div>
<!-- spellcheck — spell checking -->
<textarea spellcheck="true" placeholder="English text will be spell-checked"></textarea>
Other Global Attributes
Here are more useful global attributes:
| Attribute | Description | Example |
|---|---|---|
accesskey |
Keyboard shortcut to activate or focus an element | accesskey="s" (press Alt+S to focus) |
draggable |
Whether an element is draggable, works with the Drag & Drop API | draggable="true" |
autofocus |
Auto-focus on page load (for <input>, <textarea>, <button>, and other form elements) |
autofocus |
translate |
Controls whether element content can be translated (yes / no) |
translate="no" |
slot |
Used with Web Component <slot> elements |
slot="header" |
is |
Specifies a customized built-in element | is="x-foo" |
itemscope / itemprop / itemtype |
Microdata for structured data markup | itemscope itemtype="https://schema.org/Product" |
❓ FAQ
Q What's the difference between
id and class? When should I use each?A
id is like an ID card — each page can only have one element with a given id, making it unique. class is like a class name — multiple elements can share the same class, making it reusable. In practice, use class 90% of the time because style reuse is the norm. id has higher CSS specificity, but don't abuse it just for priority. Remember: id for JavaScript targeting, class for CSS styling.Q What is
data-* used for? How do I read it?A
data-* stores custom data on HTML elements. Example: <div data-user-id="123" data-role="admin">. Reading: JavaScript accesses it via element.dataset.userId (automatically converts hyphens to camelCase). Common uses: storing user IDs, product info, configuration parameters. Note: data-* is only for display-related data — never store sensitive info here (it's visible in source code).Q What does
contenteditable do?A
contenteditable="true" makes element content directly editable by users — click and type, like a rich text editor. Common uses: online notes, editable tables, instant comments. With document.execCommand(), you can add bold, italic, and other editing features. Note: this is frontend-only — edited content doesn't auto-save to the server; you need JavaScript to submit it.Q What's the difference between
hidden and display:none?A Both hide elements, but differ: 1)
hidden is an HTML5 standard attribute with clear semantics — "this element shouldn't be visible right now"; 2) display:none is CSS styling — just visually hidden; 3) hidden has higher priority than display:none — even with display:block set, hidden elements stay invisible. Recommendation: use hidden for element visibility state, display:none for styling needs.📖 Summary
- Global attributes can be used on all HTML elements
idfor unique identification,classfor style grouping,stylefor inline styles,titlefor hover tooltipslangdeclares language,dircontrols text directiondata-*stores custom data, read via thedatasetAPIhiddenhides elements,tabindexsets Tab order,contenteditableenables content editingaccesskeyfor keyboard shortcuts,draggablefor drag-and-drop,autofocusfor auto-focusing
📝 Exercises
- Product Showcase: Create product cards using
data-*to store each product's id, name, price, and stock status. Display product information in a popup when a button is clicked. Include at least 3 product cards. - Todo Editor: Use
contenteditable="true"to create a simple task editing area, and use thehiddenattribute to toggle "show/hide editor panel" functionality. Set a logical Tab focus order usingtabindex.