What is a global attribute?

A global attribute may be applied to any HTML element, unlike element-specific attributes such as href on a or src on img. Examples include id, class, style, title, lang, dir, hidden, tabindex and the data-* and aria-* families.

How do data-* attributes work?

Any attribute beginning with data- is a custom data attribute that holds string data for your scripts. You read them through element.dataset, where data-user-id becomes dataset.userId, and you can also target them with [data-*] CSS selectors.

What does tabindex do?

tabindex controls focusability and tab order. A value of 0 makes a normally non-focusable element focusable in document order, a negative value makes it focusable only via script, and a positive value forces an explicit order (which is usually discouraged because it is hard to maintain).

What is the inert attribute?

inert makes an element and its entire subtree non-interactive: it cannot be clicked or focused, it is skipped in the tab order, and it is removed from the accessibility tree. It is useful for disabling background content behind a modal.

Should I add a role attribute to every element?

No. Most HTML elements already carry an implicit ARIA role, and restating it is redundant while overriding it can break accessibility. Add role only when you are building a custom widget from generic elements that have no suitable native equivalent.

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), internationalization (lang, dir), behaviour (hidden, tabindex, contenteditable, inert, popover), the custom data-* family, and the accessibility attributes (role, aria-*).

How it works

Global attributes are part of the content model of every element, so the browser understands them everywhere. They take different value shapes: some are boolean (present or absent, like hidden and autofocus), some take an enumerated token (dir="ltr", contenteditable="true"), some take an integer (tabindex), and the data-* and aria-* prefixes accept a family of names. Custom data attributes are surfaced to JavaScript through the dataset property, where dashes become camelCase (data-user-id becomes dataset.userId). The accessibility attributes layer ARIA semantics on top of native HTML: role overrides the implicit role, while aria-* attributes expose state and properties such as aria-expanded or aria-label.

Tips and notes

Prefer native semantics over ARIA — the first rule of ARIA is not to use it when a native element already does the job. Use tabindex="0" to make a custom interactive widget focusable, and tabindex="-1" to allow programmatic focus without inserting it into the tab order; avoid positive values. The newer inert, popover, enterkeyhint and inputmode attributes improve interaction and on-screen keyboards. Custom data attributes should hold private page state, not data better expressed with a real attribute or microdata.

Example

<button
  type="button"
  data-product-id="42"
  aria-expanded="false"
  tabindex="0">
  Details
</button>

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

HTML Global Attributes Reference

Email me this result

How it works

Tips and notes

Example