The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Unique identifier | <section id="billing">...</section> | View examples |
| Class tokens | <article class="card featured">...</article> | View examples |
| Custom data | <button data-order-id="A42">Open</button> | View examples |
| Declare language | <blockquote lang="pt-BR">...</blockquote> | View examples |
| Declare direction | <bdi dir="auto">اسم المستخدم</bdi> | View examples |
| Hide irrelevant content | <section hidden>Not currently relevant</section> | View examples |
| Disable a subtree | <main inert>...</main> | View examples |
| Join natural tab order | <div tabindex="0">Custom focus target</div> | View examples |
| Programmatic focus only | <h2 tabindex="-1">Results</h2> | View examples |
| Enable editing | <div contenteditable="plaintext-only">
Editable text
</div> | View examples |
| Request spelling checks | <textarea spellcheck="true"></textarea> | View examples |
| Protect a token from translation | <code translate="no">npm run build</code> | View examples |
Global attributes apply across HTML elements, but their effects range from document identity to language, focus, editing, and rendering. Use them for their defined semantics, keep IDs unique, avoid positive tabindex values, and reserve data attributes for private page-level metadata rather than visible content.
Step by step
Detailed examples
Keep identifiers stable and custom data private
id must be unique in the document and is part of link and accessibility contracts. class is an unordered token set for classifications. data-* values are strings available through dataset; they are not a secure store, accessibility substitute, or reliable place for content users need to see.
<article id="order-A42" class="order-card pending" data-order-id="A42">
<h2>Order A42</h2>
<button type="button" data-action="open">Open details</button>
</article>Declare language and isolate direction
Set lang on the root and override it for passages in another language. dir controls bidirectional layout; bdi isolates unknown user-generated direction from surrounding text. Do not infer language from direction or use CSS direction as a substitute for semantic markup.
<html lang="en" dir="ltr">
<p>User <bdi dir="auto">سارة</bdi> wrote:</p>
<blockquote lang="ar" dir="rtl">مرحبًا بالعالم</blockquote>
</html>Distinguish hidden from temporarily inert
hidden marks content as not relevant and normally prevents rendering. inert leaves rendering possible but suppresses focus, activation, text selection, find-in-page, and accessibility exposure. Modal dialog behavior applies inertness automatically; avoid manually hiding content that remains referenced by visible descriptions.
<main id="page">Page content</main>
<section id="loading" hidden>Loading…</section>
<script>
loading.hidden = false;
page.inert = true;
</script>Add focus only when interaction requires it
Native controls already participate in keyboard order. tabindex=0 adds an element at its DOM position; -1 supports programmatic focus after navigation or validation. Positive values create a parallel order and should be avoided. contenteditable needs an accessible name, focus styling, persistence, and sanitization plan.
<h2 id="results" tabindex="-1">Search results</h2>
<script>
document.querySelector('#results').focus();
</script>Treat spelling and translation as hints
spellcheck is enumerated rather than a conventional Boolean attribute and user agents may ignore it. translate protects brand names, code, or identifiers from automated translation but does not enforce a security boundary. Apply both at the narrowest relevant subtree.
<label for="notes">Notes</label>
<textarea id="notes" spellcheck="true"></textarea>
<p>Run <code translate="no">npm run validate</code>.</p>Local code tester
Explore global attributes
Try language, direction, data, focus, hidden, and inert behavior.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.