HTML Global Attributes and Common Infrastructure

Intermediate

Global attributes are HTML attributes that can be specified on all HTML elements, even when an individual element has no special meaning for that attribute. They form part of HTML's common infrastructure, so learning them as a family prevents every element lesson from having to repeat the same rules.

Language and direction travel with the document

Use lang to identify the language of content and dir to establish text direction. Both can be placed on an ancestor so that the setting applies through the document subtree, with a more local declaration able to change the inherited context.

<p lang="ar" dir="rtl">?</p>

title and data-* carry different kinds of information

title represents advisory information. data-* is for custom data, state, or annotations that belong to the page or application when a more appropriate HTML feature does not exist. Neither should be used as a replacement for a semantic element or an established HTML attribute.

<article data-state="draft">?</article>

hidden and inert are different interaction states

hidden controls whether content participates in rendering, with the HTML Standard also defining the hidden-until-found state. inert is about interaction: an inert subtree cannot normally be focused or interacted with and is not exposed to assistive technologies in the normal way. Do not treat inert as a CSS visibility trick.

<section hidden>...</section>
<section inert>?</section>

tabindex changes focusability and sequential navigation

tabindex accepts an integer. A value of 0 can make an element part of sequential focus navigation when the element is otherwise not naturally focusable; a negative value can make it focusable without making it sequentially focusable. Positive values create an explicit ordering and are difficult to maintain, so they should not be used as a general layout mechanism.

<div tabindex="?">Focusable target</div>

Editing and input hints are not the same thing

contenteditable changes whether an element is editable. spellcheck controls whether the user agent may check spelling and grammar for editable or text-entry content. inputmode and enterkeyhint are hints for text-entry user interfaces; they do not change the underlying input type or validation rules. autocapitalize, autocorrect, and writingsuggestions likewise provide user-agent editing hints rather than replacing form semantics.

<input inputmode="numeric"?>

popover provides a native popover model

The popover global attribute participates in HTML's popover model. A button can invoke a popover declaratively with popovertarget, while the popover element itself can use popover to select the popover state. This is a native interaction model, not merely a convention for toggling CSS display.

<div id="help" popover>?</div>

Some global attributes are specialized

The global-attribute list also includes style, nonce, is, itemid, itemprop, itemref, itemscope, itemtype, headingoffset, and headingreset. They still belong to HTML's global-attribute surface, but their detailed semantics are specialized. This lesson establishes the cross-element ownership boundary rather than duplicating the full microdata, custom-elements, security, or heading algorithms.

Authoring rules: choose semantics before convenience

Prefer the native HTML feature that expresses the behavior you need. Use global attributes to refine that native model, not to manufacture a replacement for an element. Avoid positive tabindex values as a shortcut for visual ordering, do not use title as the only way to communicate essential information, and do not make critical content inert merely because it is temporarily inconvenient to interact with.

<button type="button" popovertarget="note">?Details</button>

The specification, translated

The WHATWG HTML Living Standard defines the global-attribute set in its common infrastructure and defines interaction-specific behavior such as hidden, inert, focus navigation, and popovers in its user-interaction model. The central idea is that these attributes are shared language features, while specialized attributes retain their own domain-specific algorithms.

Normative source: https://html.spec.whatwg.org/multipage/dom.html and https://html.spec.whatwg.org/multipage/interaction.html

<div itemscope itemtype="https://example.com/Type">?</div>