HTML global attributes
Attributes you can put on any element: id, class, lang, title, hidden and others.
Any HTML element accepts the global attributes. You will type id (a unique name for one element) and class (a reusable label for styling) most often, followed by lang, title and hidden.
Some of them change how an element behaves. tabindex controls keyboard focus and contenteditable lets the user edit the text. inert switches off a whole region, while popover turns an element into a popup. Your own data goes in data-* attributes. The classic beginner slip is giving two elements the same id; each id may appear once per page.
For the full list and the exact rules for each attribute, read the global attributes section of the HTML Living Standard (opens in a new tab). The Attributes lesson in the course shows them in real markup.
Syntax
<p id="intro" class="note" lang="en" title="Extra info" data-step="1">
Text
</p>When to use it
Global attributes handle needs that belong to one particular element. id lets a link or a <label> point at it, class groups elements for CSS, lang marks a quote or product name in another language, and data-* stores a small value for scripts or attribute selectors.
Check first whether a dedicated element already says the same thing. A real <button> beats tabindex="0" on a div, and visible text or an <abbr> beats a title tooltip. Before you add role or aria-*, read the ARIA basics lesson. Native HTML is almost always the safer choice.
The hidden attribute catches people out. It works through a default display:none, so any CSS rule that sets display on the same element shows it again. If you style elements that can be hidden, add [hidden]{display:none} to your stylesheet. Hidden content is also hidden from screen readers.
Attributes
| Attribute | What it does |
|---|---|
id | Unique identifier. Used by links (#id), labels, CSS and scripts. |
class | Space-separated names for styling or scripting. Can repeat. |
style | Inline CSS declarations for this one element. |
title | Advisory text, often shown as a tooltip on hover. |
lang | Language of the content, such as en or es. |
dir | Text direction: ltr, rtl or auto. |
hidden | Hides the element. hidden="until-found" lets find-in-page reveal it. |
tabindex | 0 adds the element to the Tab order, -1 makes it focusable by script only. |
accesskey | Suggests a keyboard shortcut to activate or focus the element. |
contenteditable | Makes the content editable by the user. |
draggable | Whether the element can be dragged (true or false). |
spellcheck | Turns spell checking on or off for editable text. |
translate | yes or no: whether translation tools should translate the content. |
autofocus | Focuses the element when the page loads. Use sparingly. |
inert | Makes the element and its children unclickable and unfocusable. |
popover | Turns the element into a popover that a button can show and hide. |
inputmode | Hints which on-screen keyboard to show (numeric, email, tel...). |
enterkeyhint | Label for the Enter key on virtual keyboards (go, next, send...). |
autocapitalize | Controls automatic capitalization of typed text. |
data-* | Custom data for scripts, such as data-price="9". |
role, aria-* | ARIA attributes that add accessibility information. |
Live example
Edit the code and watch the preview.
<p id="intro" class="note" title="I am a tooltip">Hover over this paragraph.</p>
<p lang="fr">Bonjour tout le monde.</p>
<p hidden>You cannot see this paragraph.</p>
<p contenteditable="true">Click here and type.</p>
<p data-price="9">Custom data lives in data-* attributes.</p>More examples
Status labels with data attributes
Each task stores its state in a data-status attribute, and CSS attribute selectors color the rows. The brand name carries translate="no" so translation tools leave it alone, and the French phrase has its own lang so it is pronounced correctly.
<style>
li[data-status="done"]{color:#2e7d32;text-decoration:line-through}
li[data-status="late"]{color:#c62828;font-weight:bold}
</style>
<h2>Launch tasks for <span translate="no">PanFlip</span></h2>
<ul>
<li data-status="done">Write the menu</li>
<li data-status="late">Print the posters</li>
<li data-status="open">Order <span lang="fr">pain au chocolat</span> for the party</li>
</ul>A popover with no script
The popover attribute turns any element into a popup that appears above the page. A button whose popovertarget matches the popup's id opens it, and pressing Escape or clicking outside closes it, all without a line of JavaScript.
<p>We use cookies to remember your settings.</p>
<button popovertarget="help">What is a cookie?</button>
<div id="help" popover>
<p>A cookie is a small piece of text a website stores in your browser.</p>
<button popovertarget="help" popovertargetaction="hide">Close</button>
</div>Tip: One id per element, one element per id. Repeating things get a class.
Browser support
Classic global attributes such as id, class, style, title, lang and dir have worked in every browser for decades. Newer ones arrived later: inert reached all major engines in 2023 and popover in 2024, so check the popover support table (opens in a new tab) if your visitors use older devices.
Accessibility
Stay away from positive tabindex values. Don't put anything important in title either, since touch and keyboard users never see it. Set lang on the html element so screen readers pronounce the text correctly, and before adding aria-* attributes read the W3C guide to providing accessible names and descriptions (opens in a new tab).
Common mistakes
Wrong
<p id="note">First</p>
<p id="note">Second</p>Right
<p class="note">First</p>
<p class="note">Second</p>An id may appear only once per document. Anything that repeats needs a class.
Wrong
<div tabindex="5">Menu</div>Right
<button type="button">Menu</button>A positive tabindex yanks the element out of the natural focus order. Use a real button, or tabindex="0" if you must.
Frequently asked questions
What are global attributes in HTML?
They are the attributes the HTML standard allows on every element, whatever its type. The list includes id, class, style, title, lang, dir, hidden, tabindex, inert, popover and any data-* attribute. A few only do something visible on certain elements. Writing them anywhere is still valid.
What is the difference between id and class in HTML?
An id names exactly one element and must be unique in the document. That is why fragment links (#id), <label for> and ARIA references all point at ids. A class can sit on many elements, and one element can carry several classes separated by spaces. Style groups with classes and save ids for the times you need one unique hook. Markup pasted from a word processor often arrives full of stray ids, classes and inline styles; a free HTML cleaner (opens in a new tab) strips them before you add your own.