Global HTML Attributes
Global attributes are attributes common to all HTML elements — they can be specified on any tag, even if they may have no visible effect on some elements.
What are Global Attributes?
Global attributes are HTML attributes that can be applied to any HTML element, regardless of the element type. For example, you can add an id, class, or style attribute to a <div>, <p>, <a>, or any other element.
These attributes provide common functionality such as unique identification, styling, accessibility, interactivity, and internationalization. The HTML specification defines them on the HTMLElement interface, which every HTML element inherits from.
While global attributes are valid on all elements, some may have no practical effect on certain elements. For instance, inputmode is globally valid but only meaningful on editable elements like <input> or elements with contenteditable.
Core
The foundational attributes used on nearly every HTML element — identification, styling, language, and custom data.
| Attribute | Description |
|---|---|
| id | A unique identifier for the element within the entire document. Must be unique per page, cannot contain spaces, and is case-sensitive. Used for CSS selectors (#id), JavaScript targeting (getElementById), and fragment-link navigation (#section). |
| class | Specifies one or more space-separated CSS class names for styling the element. Unlike id, the same class can be applied to many elements, and one element can have multiple classes (e.g. class="card primary active"). |
| style | Applies inline CSS styles directly to the element using property: value pairs separated by semicolons (e.g. style="color: red; margin: 10px;"). Inline styles have high specificity and override most stylesheet rules. Avoid for maintainability; prefer external CSS. |
| title | Provides advisory or supplemental text about the element. Browsers typically display this as a tooltip on hover. Assistive technologies may also expose it. Note: relying on title for essential information is not recommended since touch devices and keyboard users cannot trigger the tooltip. |
| hidden | A boolean attribute that indicates the element is not yet, or is no longer, relevant. The browser will not render hidden elements (equivalent to display: none in CSS). Can also accept the value "until-found" to allow the browser to reveal the element when the user searches for its content (find-in-page). |
| lang | Specifies the language of the element's content using a BCP 47 language tag (e.g. "en", "fr", "ja", "en-US"). Helps search engines, screen readers (for correct pronunciation), and spell-checkers. Typically set on the <html> element, but can be overridden on individual elements for multilingual content. |
| dir | Sets the text directionality of the element's content. Values: "ltr" (left-to-right, default for most languages), "rtl" (right-to-left, for languages like Arabic and Hebrew), "auto" (lets the browser decide based on the content's first strong character). Essential for internationalised websites. |
| data-* | Custom data attributes that store private data on any element. The attribute name after "data-" can contain only lowercase letters, numbers, and hyphens. Accessible in JavaScript via element.dataset (e.g. data-user-id="42" → element.dataset.userId). Ideal for passing configuration to JavaScript without non-standard attributes. |
Interaction
Attributes that control how users interact with elements — focus, editing, dragging, and popovers.
| Attribute | Description |
|---|---|
| tabindex | Controls the element's focus order during keyboard (Tab-key) navigation. Values: 0 — places the element into the natural tab order; -1 — makes the element programmatically focusable (via JavaScript focus()) but not reachable by Tab key; a positive integer (discouraged) — sets an explicit order. Avoid positive values as they create confusing navigation. |
| accesskey | Assigns a keyboard shortcut to activate or focus the element. The value is a single character (e.g. accesskey="s"). The key combination varies by OS and browser (Alt+key on Windows/Linux, Ctrl+Alt+key on macOS). Use sparingly, as conflicts with browser or OS shortcuts can confuse users. |
| contenteditable | Makes the element's content directly editable by the user, turning it into a rich-text input. Values: "true" (editable), "false" (not editable), "plaintext-only" (editable but no formatting, supported in Chromium browsers). When enabled, the element gains a focus ring and supports text selection, typing, and clipboard events. |
| draggable | Specifies whether the element can be dragged using the HTML Drag and Drop API. Values: "true" (draggable), "false" (not draggable), "auto" (browser default). Images and links are draggable by default; all other elements default to false. You must also handle dragstart and related events in JavaScript for meaningful drag-and-drop behaviour. |
| autofocus | A boolean attribute that automatically moves focus to the element when the page loads. If multiple elements have this attribute, the first one in the document receives focus. Useful for search fields, but can harm accessibility if it causes the screen reader to skip content. |
| inert | A boolean attribute that makes the element and all its descendants completely non-interactive. The browser ignores click events, focus, and assistive technology for inert subtrees. Ideal for disabling content behind modals/dialogs, off-screen navigation, or content that is visually present but logically inactive. |
| popover | Designates an element as a popover, hidden by default and shown via a control button (using the popovertarget attribute) or JavaScript (showPopover/hidePopover). Values: "auto" (light-dismiss behaviour — closes on outside click or Escape), "manual" (must be closed programmatically or by an explicit button). Part of the Popover API introduced in HTML. |
Text & Input
Attributes that influence text behaviour on virtual keyboards, spell-checking, translation, and auto-correction.
| Attribute | Description |
|---|---|
| spellcheck | Specifies whether the browser should check the element's content for spelling and grammar errors. Values: "true" (enable), "false" (disable). Typically defaults to true for editable elements (inputs, textareas, contenteditable). Useful to disable on code editors or fields that expect non-dictionary input. |
| autocapitalize | Controls whether and how text input is automatically capitalised on virtual keyboards. Values: "off"/"none" (no capitalisation), "on"/"sentences" (capitalise the first letter of each sentence), "words" (capitalise the first letter of each word), "characters" (all uppercase). Has no effect on physical keyboards or type="url" / type="email" inputs. |
| autocorrect | Controls whether input text is automatically corrected for spelling errors on supported browsers. Values: "on" (enable), "off" (disable). Primarily supported in Safari; not yet a widely implemented standard. Useful for disabling auto-correction on fields where exact input is important (e.g. usernames, codes). |
| translate | Hints to translation tools (including browser built-in translators and services like Google Translate) whether the element's content should be translated. Values: "yes" (translate), "no" (do not translate). Use translate="no" for brand names, code snippets, technical terms, and addresses that should remain unchanged. |
| enterkeyhint | Customises the label displayed on the Enter key of virtual (on-screen) keyboards. Values: "enter", "done", "go", "next", "previous", "search", "send". Helps mobile users understand what action the Enter key will perform. Has no effect on physical keyboards. |
| inputmode | Hints the type of virtual keyboard to display for editable elements. Values: "none" (no keyboard), "text" (standard keyboard), "decimal" (numeric with decimal), "numeric" (numeric only), "tel" (telephone pad), "search" (search-optimised), "email" (includes @), "url" (includes / and .com). Does not enforce validation — use the input type attribute for that. |
| writingsuggestions | Controls whether browser-provided writing suggestions (such as predictive text or AI-assisted composition) should appear for the element. Values: "true" (enable), "false" (disable). This is a relatively new attribute with limited browser support — check compatibility before relying on it. |
| virtualkeyboardpolicy | Controls whether the on-screen virtual keyboard is automatically shown when the element gains focus. Values: "auto" (browser decides, typically shows the keyboard), "manual" (keyboard must be triggered programmatically via navigator.virtualKeyboard.show()). Useful for custom input components that manage their own keyboard. |
Accessibility
ARIA roles and attributes that make your content understandable to screen readers and other assistive technologies.
| Attribute | Description |
|---|---|
| role | Defines the element's semantic role for assistive technologies (ARIA). Overrides the element's implicit role (e.g. <div role="button"> makes a div act as a button for screen readers). Common roles: "navigation", "banner", "main", "alert", "dialog", "tablist". Follow the first rule of ARIA: prefer native HTML elements with built-in roles over adding role attributes. |
| aria-* | A family of ARIA attributes that provide additional semantics and state information to assistive technologies. Key examples: aria-label (provides an accessible name), aria-hidden="true" (hides from screen readers), aria-expanded (indicates if a collapsible section is open), aria-describedby (references a description element), aria-live (announces dynamic content changes). Over 50 ARIA attributes exist across roles, states, and properties. |
Web Components
Attributes used with the Shadow DOM, custom elements, and slot-based composition.
| Attribute | Description |
|---|---|
| is | Specifies that a standard HTML element should behave as a registered custom element (a customised built-in element). For example, <button is="fancy-button"> tells the browser to upgrade the button using the class registered for "fancy-button". Note: Safari does not support customised built-in elements and is unlikely to in the future; consider autonomous custom elements (<fancy-button>) instead. |
| slot | Assigns the element to a named <slot> inside a shadow DOM. The host component defines slots in its shadow template, and light DOM children use slot="name" to target them. Elements without a slot attribute fill the default (unnamed) slot. Only meaningful for children of elements that have a shadow root. |
| part | Exposes an element inside a shadow DOM as a styleable part, allowing external CSS to target it via the ::part() pseudo-element. For example, an element with part="label" inside a shadow root can be styled with my-component::part(label) { color: red; }. Multiple part names can be space-separated. |
| exportparts | Allows shadow parts from a nested Web Component to be re-exported into a parent component's light DOM. This enables deep styling across multiple layers of shadow DOM. Syntax: exportparts="inner-part: outer-part" maps the inner component's part to a new external name. |
Microdata
Attributes for embedding machine-readable structured data (Schema.org) to power rich search results.
| Attribute | Description |
|---|---|
| itemscope | A boolean attribute that creates a new microdata item scope. Elements with itemscope contain properties (defined by itemprop) that describe the item. Used together with itemtype to implement structured data (schema.org), which helps search engines display rich results (star ratings, recipes, events, etc.). |
| itemtype | Specifies the vocabulary URL (typically a schema.org type) that defines the structure and property names of the microdata item. Must be used with itemscope. For example, itemtype="https://schema.org/Product" tells parsers that the item's properties describe a product. |
| itemid | Provides a globally unique identifier for a microdata item (such as an ISBN, URL, or URI). Only valid when the element also has itemscope and itemtype. The value should be a URL or a globally recognised identifier scheme. |
| itemprop | Adds a named property to the closest ancestor microdata item. The property name should match the vocabulary defined by itemtype. The value is taken from the element's content (or specific attributes like href, src, content, depending on the element). Multiple properties can be space-separated. |
| itemref | References the IDs of elements elsewhere in the document that contain additional properties for the microdata item. This allows you to associate properties with an item even if they are not nested inside the itemscope element. Values are space-separated element IDs. |
Security
Attributes related to Content Security Policy and safe resource loading.
| Attribute | Description |
|---|---|
| nonce | A cryptographic nonce ("number used once") used by Content Security Policy (CSP) to whitelist specific inline scripts or styles. The server generates a unique nonce per request, adds it to the CSP header and to the element (e.g. <script nonce="abc123">). After parsing, the browser hides the nonce from JavaScript to prevent exfiltration. |
Layout
Experimental attributes for advanced CSS-based positioning.
| Attribute | Description |
|---|---|
| anchor | Associates a positioned element with an anchor element for CSS Anchor Positioning. The value is the id of the anchor element. This allows you to position popovers, tooltips, and dropdowns relative to their trigger element using pure CSS (anchor(), anchor-size()). Experimental — limited browser support as of 2024–2025. |
Deprecated
Legacy attributes inherited from XHTML. Avoid these in modern HTML5 documents.
| Attribute | Description |
|---|---|
| xml:langDeprecated | Inherited from XHTML. Served the same purpose as the lang attribute (specifying content language) in XML-based documents. In HTML5, use the standard lang attribute instead. Only retain xml:lang when serving documents as application/xhtml+xml for backward compatibility. |
| xml:baseDeprecated | Inherited from XHTML. Specified the base URL for resolving relative URIs within the element's scope. In HTML5, use the <base> element in the <head> instead. No modern browser supports xml:base in text/html documents. |
Usage Examples — Core Attributes
Using id, class, style, data-*, title, hidden, lang, and dir to identify, style, and configure elements.
Core Attributes
<!-- id — unique identifier -->
<div id="main-content">...</div>
<!-- class — CSS styling (multiple classes) -->
<p class="intro highlight text-center">...</p>
<!-- style — inline CSS -->
<span style="color: red; font-weight: bold;">Important</span>
<!-- data-* — custom data (accessed via JS dataset) -->
<button data-action="submit" data-user-id="42">Submit</button>
<script>
const btn = document.querySelector('button');
console.log(btn.dataset.userId); // "42"
</script>
<!-- title — tooltip on hover -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- hidden — hide element from rendering -->
<div hidden>This content is hidden</div>
<!-- hidden="until-found" — revealed by find-in-page -->
<div hidden="until-found">Searchable hidden content</div>
<!-- lang & dir — internationalisation -->
<p lang="ar" dir="rtl">مرحبا بالعالم</p>
More Examples — Interaction Attributes
Making elements editable, focusable, draggable, and using the native Popover API.
Interaction Attributes
<!-- contenteditable — make any element editable -->
<p contenteditable="true">Click to edit this text</p>
<div contenteditable="plaintext-only">Plain text only</div>
<!-- tabindex — control keyboard focus order -->
<div tabindex="0">Focusable via Tab key</div>
<div tabindex="-1" id="modal">Focusable via JS only</div>
<!-- draggable — enable drag-and-drop -->
<div draggable="true" ondragstart="handleDrag(event)">
Drag me!
</div>
<!-- inert — disable all interaction -->
<div inert>
<button>This button cannot be clicked</button>
<a href="/link">This link cannot be followed</a>
</div>
<!-- popover — native popover API -->
<button popovertarget="my-popup">Show Info</button>
<div id="my-popup" popover="auto">
<p>This is a popover! Click outside to close.</p>
</div>
<!-- autofocus — auto-focus on page load -->
<input type="search" autofocus placeholder="Search...">
More Examples — Accessibility (ARIA) Attributes
Adding roles, labels, and live regions to make dynamic interfaces accessible to all users.
Accessibility (ARIA) Attributes
<!-- role — override semantic meaning -->
<div role="alert">Form submitted successfully!</div>
<!-- aria-label — accessible name for screen readers -->
<button aria-label="Close dialog">✕</button>
<!-- aria-hidden — hide decorative content -->
<span aria-hidden="true">🎨</span>
<!-- aria-expanded — collapsible sections -->
<button aria-expanded="false" aria-controls="panel">
Toggle Panel
</button>
<div id="panel" hidden>Panel content here.</div>
<!-- aria-describedby — extra description -->
<input type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 8 characters.</p>
<!-- aria-live — announce dynamic changes -->
<div aria-live="polite" id="status">Waiting...</div>
More Examples — Microdata (Structured Data)
Embedding Schema.org data directly in HTML so search engines can display rich results.
Microdata (Structured Data)
<!-- Schema.org Product with Microdata -->
<div itemscope itemtype="https://schema.org/Product">
<h2 itemprop="name">Wireless Headphones</h2>
<img itemprop="image" src="headphones.jpg" alt="">
<p itemprop="description">
Noise-cancelling over-ear headphones.
</p>
<div itemprop="offers" itemscope
itemtype="https://schema.org/Offer">
<span itemprop="price" content="79.99">$79.99</span>
<meta itemprop="priceCurrency" content="USD">
<link itemprop="availability"
href="https://schema.org/InStock">
</div>
</div>
Best Practices & Tips
Use semantic attributes first: Prefer native HTML semantics (e.g. <button>, <nav>) over adding role attributes to generic elements. Native elements come with built-in keyboard handling, focus management, and accessibility support that ARIA attributes cannot fully replicate.
Keep IDs unique: Duplicate id values cause unpredictable behaviour with getElementById(), CSS selectors, label associations, and anchor links. Use classes for shared styling and data attributes for shared data.
Avoid positive tabindex: Using tabindex values greater than 0 forces an explicit tab order that is difficult to maintain and confusing for keyboard users. Stick to 0 (natural order) and -1 (programmatic focus only).
Use data-* over non-standard attributes: Custom data attributes are the correct way to attach extra information to elements. Non-standard attributes (e.g. myattr="value") are invalid HTML and may conflict with future specifications.
Set lang on <html>: Always define the primary language of the page on the root element. Override with lang on child elements only where a different language appears. This enables correct spell-checking, screen reader pronunciation, and search engine language detection.
Be cautious with autofocus: Auto-focusing an element on page load can disorient screen reader users and cause the page to scroll past important content. Use it only when the focused element is the obvious primary action (e.g. a search page's input field).
HTML elements also support event handler attributes such as onclick, onmouseover, onsubmit, and many more.