Global Attributes

Global attributes can be used on nearly any HTML element, regardless of what it is. You already met two of them — lang and dir — on the <html> element page. This page is your full reference for the rest.

Reference table

Attribute	Purpose	Example
`id`	A unique identifier for the element within the page — used by CSS, JavaScript, and URL fragment links	`<div id="main-nav">`
`class`	One or more space-separated names used to group elements for CSS styling or JavaScript selection	`<p class="intro highlight">`
`style`	Inline CSS applied directly to this one element	`<p style="color: red;">`
`title`	Extra advisory information, usually shown as a tooltip on hover	`<abbr title="HyperText Markup Language">HTML</abbr>`
`lang`	The language of this element's content, overriding the page-level language if needed	`<span lang="fr">Bonjour</span>`
`dir`	Text direction: `ltr`, `rtl`, or `auto`	`<p dir="rtl">مرحبا</p>`
`tabindex`	Controls whether an element is keyboard-focusable, and in what order	`<div tabindex="0">`
`hidden`	Boolean attribute that hides the element entirely from rendering	`<div hidden>`
`contenteditable`	Makes the element's content directly editable by the user in the browser	`<div contenteditable="true">`
`draggable`	Marks the element as part of the HTML Drag and Drop API	`<img draggable="true" src="icon.png" alt="Icon" />`

id: unique identity

An id value must be unique within the whole page — no two elements should share one. It's used for CSS (#main-nav { ... }), for JavaScript (document.getElementById(...)), and for linking directly to a section of a page with a URL fragment like page.html#main-nav.

class: reusable grouping

Unlike id, a class value can be reused across many elements, and one element can have several classes at once, separated by spaces: class="card featured". Classes are the backbone of nearly all real-world CSS.

tabindex and keyboard focus

<code>tabindex="0"</code> — inserts the element into the natural tab order, exactly where it appears in the document. Commonly used to make a custom, non-interactive element (like a <code><div></code> acting as a button) keyboard-focusable.
<code>tabindex="-1"</code> — removes the element from the tab order, but still allows it to be focused programmatically (e.g. via JavaScript after an action).
A positive value like <code>tabindex="1"</code> forces a specific manual order — generally discouraged, since it's easy to create a confusing, inconsistent tab sequence.

Prefer real interactive elements over tabindex tricks

A native <button> is already keyboard-focusable, clickable, and announced correctly by screen readers. Reach for tabindex on non-interactive elements only when there is genuinely no built-in element that fits — this comes up again in the Accessibility section of this series.

hidden vs display: none

The hidden boolean attribute removes an element from rendering entirely — similar to CSS's display: none. The difference is that hidden is a plain HTML attribute you can toggle from markup or simple JavaScript without touching a stylesheet at all.

HTML

<div hidden>You can't see me.</div>

contenteditable and draggable, briefly

Both of these enable interactive browser behavior directly from HTML, without any JavaScript library: contenteditable turns any element into an editable region (like a lightweight rich-text box), and draggable opts an element into the native HTML Drag and Drop API. Dedicated later pages — Editable Content and Drag and Drop API — cover both in depth.

Global means global, not universal

"Global" means these attributes are valid on almost every element — but a few, especially certain void elements, still ignore some of them in practice (for instance, contenteditable makes little sense on <br>). Use your judgment.

With the most common cross-cutting attributes covered, next we look at something you write constantly but rarely think about: comments — how to leave notes in your HTML that the browser ignores but still sends to the client.