HTML Global Attributes Reference

This is a searchable reference for HTML global attributes — the attributes you may place on any element regardless of its tag. It spans identity (id, class), presentation (style), internationalisation (lang, dir), behaviour (hidden, tabindex, contenteditable, inert, popover), the custom data-* family, and the accessibility attributes (role, aria-*).

What makes an attribute “global”

Most HTML attributes are element-specific: href belongs to <a> and <link>, src belongs to <img> and <script>. Global attributes are the exception — the HTML spec explicitly lists them as valid on every element. Browsers that encounter an unrecognised element still parse its global attributes correctly, which is how custom elements and web components inherit things like id and class for free.

Value shapes

Global attributes take several distinct value shapes:

• Boolean — present means true, absent means false. hidden and autofocus work this way; writing hidden="false" still hides the element because the attribute is present.
• Enumerated token — a fixed set of keywords. dir accepts ltr, rtl or auto; contenteditable accepts true, false or inherit.
• Integer — tabindex takes a signed integer; negative, zero or positive each mean something different.
• Open string — id, class, title and lang take arbitrary text values.
• Prefixed family — data-* and aria-* accept any name after the prefix.

The data-* family in depth

Any attribute whose name starts with data- is a custom data attribute. It stores private page state that JavaScript can read, with no effect on rendering or accessibility. The dataset API gives you camelCase access: data-product-id becomes element.dataset.productId. You can also target these attributes in CSS with the [data-*] attribute selector. Keep the values short strings — long objects belong in JavaScript state, not DOM attributes.

Accessibility attributes

role overrides the element’s implicit ARIA role. Most of the time you should not override it — a <button> already has role button. The aria-* family adds state and properties that native HTML cannot express: aria-expanded, aria-pressed, aria-label, aria-describedby. These are read by screen readers, so they must reflect actual state. If aria-expanded="false", the content must actually be collapsed.

Newer global attributes worth knowing

• inert — makes an element and its entire subtree non-interactive, invisible to assistive tech, and skipped in the tab order. Ideal for disabling background content behind a modal.
• popover — enables the native popover API; combine with popovertarget on a button.
• enterkeyhint — hints the mobile keyboard what label to show on the Enter key (go, search, send, done, next).
• inputmode — hints the virtual keyboard type without changing an input’s validation (numeric, decimal, email, url).
• translate — translate="no" tells translation services and browsers to leave the element’s text untouched (useful for code samples or proper nouns).

Practical example

<button
  type="button"
  data-product-id="42"
  aria-expanded="false"
  aria-controls="details-panel"
  tabindex="0">
  Show details
</button>
<div id="details-panel" hidden>Product detail text here.</div>

This button is focusable, carries a product identifier accessible to JavaScript, and correctly signals its collapsed state to screen readers. When clicked, the script toggles hidden on the panel and flips aria-expanded to "true".

Everything runs in your browser; nothing you search is uploaded.