HTML global attributes

Definition

Global attributes can appear on all HTML elements, although some have no useful effect in a particular context. They include id, class, lang, dir, hidden, title, style, tabindex, data-*, contenteditable, and accessibility-related attributes.

Identity and classes

id identifies one element within the document and supports fragments, labels, descriptions, and scripting. Values must be unique. class groups elements for styling or behavior and can contain several space-separated tokens.

<section id="schedule" class="panel schedule-panel">
  <h2>Workshop schedule</h2>
</section>

Language and direction

lang declares the language of an element and its descendants; apply it at the root and mark genuine changes. dir handles directional context such as right-to-left text. Do not infer language or direction from CSS alone.

Hidden and focus state

hidden removes content from rendering, while tabindex="0" adds an appropriate custom focus target to sequential navigation and -1 allows programmatic focus. Positive tabindex values create brittle order and should be avoided. Do not place active focus inside hidden or inert content.

Data and editing

data-* stores private application hooks as strings; it does not create public semantics. contenteditable introduces editing, selection, paste, focus, sanitization, and undo responsibilities and should not be used as a casual rich-text shortcut.

Common failures

• Duplicate IDs break label, fragment, and script relationships.
• title is used as the only instruction or accessible name.
• Positive tabindex fights source order.
• Hidden content remains focusable through inconsistent state management.
• User-authored editable HTML is inserted without sanitization.

Verification checklist

Validate uniqueness and attribute syntax, follow every fragment, and inspect label and description references. Test language changes with a screen reader, keyboard order with all styles active, and hidden or inert states during every interaction. Review each data-*, editing, and inline-style use for necessity, then test forced colors, zoom, and script failure.

Maintenance note

Audit identifiers and references after component reuse or route generation. Duplicate IDs and stale for, fragment, or described-by values often appear only when several otherwise valid instances render together.