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, JavaScript getElementById(), 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.

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.

▶ Try It Yourself

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)

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>

▶ Try It Yourself

ℹ️ 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 to display: none), the element takes up no space
tabindex — Tab key navigation order: tabindex="0" focuses in document order, -1 makes it unfocusable
contenteditable — Makes element content editable; set to true to enable
spellcheck — Enables or disables spell checking: true / false

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"`

📖 Summary

Global attributes can be used on all HTML elements
id for unique identification, class for style grouping, style for inline styles, title for hover tooltips
lang declares language, dir controls text direction
data-* stores custom data, read via the dataset API
hidden hides elements, tabindex sets Tab order, contenteditable enables content editing
accesskey for keyboard shortcuts, draggable for drag-and-drop, autofocus for 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 the hidden attribute to toggle "show/hide editor panel" functionality. Set a logical Tab focus order using tabindex.

← Previous: HTML Input Types Next: HTML Tag Reference →