Global Attributes - HTML reference 2026 vdsology

By vdsology May 7, 2026

vdsology html reference 2026 chapter 1

Chapter 1 — Global Attributes

Chapter 1 — Global Attributes

Global attributes can be applied to any HTML element — they are not specific to any one element. This chapter covers every global attribute defined in the HTML Living Standard as of April 2026, including the full set of ARIA global attributes and the newest additions from 2023–2026.

1.1 — Core Identity & Classification

`id`

A unique identifier for the element within the document. Must be unique — no two elements in the same document may share an id. Used by CSS selectors (#id), JavaScript (getElementById), URL fragment navigation (href="#id"), for/aria-labelledby/aria-describedby associations, and popovertarget/commandfor.

Values: Any string without spaces. Case-sensitive.

<section id="main-content">…</section>
<a href="#main-content">Skip to main content</a>

`class`

One or more space-separated class names. Used by CSS selectors (.class) and JavaScript (getElementsByClassName, querySelector). An element can have any number of classes.

<article class="card featured large">…</article>

`style`

Inline CSS declarations applied directly to the element. Highest specificity of any CSS (except !important). Use sparingly — prefer external stylesheets.

<p style="color: #dc2626; font-weight: bold;">Warning text</p>

`title`

Advisory text — shown as a tooltip on hover in desktop browsers. Not reliably accessible — not announced on mobile, not reachable by keyboard-only users. Use aria-label or visible text for important information. Valid for supplementary hints only.

<abbr title="World Health Organisation">WHO</abbr>
<button title="Close navigation panel">✕</button>

1.2 — Language & Direction

`lang`

The natural language of the element’s content. Overrides the document-level lang on <html>. Affects spell-checking, screen reader pronunciation, hyphenation, and quote style.

Values: BCP 47 language tags — en, en-GB, en-US, fr, de, ar, zh-Hans, ja, etc.

<html lang="en">
<p>This is English. <span lang="fr">Voici du français.</span></p>
<blockquote lang="de" cite="https://example.com">Ein deutsches Zitat.</blockquote>

`dir`

Text directionality of the element’s content.

Values:

ltr — Left to right (Latin, Cyrillic, Greek scripts)
rtl — Right to left (Arabic, Hebrew, Persian, Urdu)
auto — Browser infers direction from first strong directional character in content

<html lang="en" dir="ltr">
<p lang="ar" dir="rtl">مرحباً بالعالم</p>
<p dir="auto">Unknown direction text</p>

`translate`

Whether the element’s text content should be translated by browser translation tools and services.

Values: yes (default) or no

<!-- Brand name: do not translate -->
<span translate="no">Claude</span>

<!-- Code: do not translate -->
<code translate="no">display: flex</code>

<!-- Normal content: translate (default) -->
<p>Hello world</p>

1.3 — Keyboard & Interaction

`tabindex`

Controls whether an element is keyboard-focusable and its position in the tab order.

Values:

tabindex="0" — Element is focusable; inserted into the natural tab order at its DOM position
tabindex="-1" — Element is focusable via JavaScript (element.focus()) but excluded from keyboard tab order
tabindex="n" (positive integer) — Element is focusable; tab order position is n. Avoid — creates confusing non-sequential tab order

<!-- Custom interactive element: add to tab order -->
<div role="button" tabindex="0" onclick="activate()">Click me</div>

<!-- Programmatically focusable but not in tab order -->
<div id="error-message" tabindex="-1" role="alert">Error: field required</div>
<script>document.getElementById('error-message').focus();</script>

`accesskey`

Specifies a keyboard shortcut key. Use sparingly — conflicts with browser and OS shortcuts are common and vary by platform.

<button accesskey="s">Save (Alt+S)</button>
<a href="/search" accesskey="f">Search (Alt+F)</a>

`autofocus`

Boolean. The element should receive focus automatically when the page loads (or when its containing <dialog> is shown). Only one element per document or dialog should have autofocus.

<input type="search" autofocus placeholder="Search…">
<dialog>
  <button autofocus>OK</button>  <!-- focuses when dialog opens -->
</dialog>

1.4 — Editing & Input Behaviour

`contenteditable`

Makes an element’s content directly editable by the user in the browser.

Values:

true or empty string ("") — Content is editable; inherits rich text behaviour
false — Content is not editable; overrides an inherited contenteditable
plaintext-only — Content is editable; only plain text allowed (no HTML formatting, no rich paste)

<!-- Rich text editable region -->
<div contenteditable="true" role="textbox" aria-multiline="true"
     aria-label="Write your post here">
  Start typing…
</div>

<!-- Plain text only: no formatting allowed -->
<p contenteditable="plaintext-only">Edit this plain text.</p>

<!-- Prevent editing within an editable parent -->
<div contenteditable="true">
  Editable <span contenteditable="false">NOT editable</span> editable
</div>

`spellcheck`

Controls whether the browser spell-checks the element’s content. Relevant for contenteditable elements, <input type="text">, and <textarea>.

Values: true or false

<textarea spellcheck="true">User-written content.</textarea>
<input type="text" name="code" spellcheck="false">
<div contenteditable="plaintext-only" spellcheck="true">Write here</div>

`draggable`

Whether the element can be dragged using the HTML Drag and Drop API.

Values: true or false (must be explicit — no bare boolean attribute)

<div draggable="true" ondragstart="handleDragStart(event)">
  Drag me
</div>

1.5 — Visibility & Availability

`hidden`

Hides an element. Three modes:

hidden (boolean): Element is completely hidden — removed from rendering, not accessible, not findable.

hidden="until-found" (cross-browser): Element is hidden but remains findable by the browser’s “Find in Page” (Ctrl+F) and the beforematch event. When found, the browser automatically removes hidden and reveals the element. Ideal for collapsible sections, accordions, and tab panels.

hidden="" (empty string): Same as boolean hidden.

<!-- Completely hidden -->
<div hidden>Not visible, not accessible.</div>

<!-- Hidden but searchable -->
<section hidden="until-found" id="faq-answer-3">
  <p>This answer appears when the user searches for keywords within it.</p>
</section>

<!-- JavaScript toggle -->
<script>
  element.hidden = true;   // hide
  element.hidden = false;  // show
</script>

`inert`

Boolean. Makes an element and all its descendants completely non-interactive and invisible to assistive technologies — as if they don’t exist. Stronger than hidden (which only hides visually). Used to “grey out” background content when a modal is open.

<!-- Background content inerted while modal is open -->
<main inert aria-hidden="true">
  <p>Background content — not focusable, not clickable</p>
</main>
<dialog open>
  <p>Modal content — fully interactive</p>
</dialog>

1.6 — Mobile & Input Mode

`autocapitalize`

Controls automatic capitalisation on mobile virtual keyboards. Applies to <input> text types and <textarea>.

Values:

off or none — No autocapitalisation (for usernames, passwords, code)
on or sentences — Capitalises first letter of each sentence (default for most inputs)
words — Capitalises first letter of each word (for name fields)
characters — ALL CAPS (for codes, plate numbers)

<input type="text" name="username" autocapitalize="off">
<input type="text" name="name" autocapitalize="words">
<input type="text" name="code" autocapitalize="characters">
<textarea autocapitalize="sentences"></textarea>

`inputmode`

Hints to the browser which virtual keyboard type to show. Does not change the input’s value validation — only affects the keyboard displayed on mobile.

Values:

Value	Keyboard shown	Use for
`none`	No keyboard	Custom keyboard via JavaScript
`text`	Full text keyboard (default)	General text
`decimal`	Numeric with decimal point	Prices, measurements
`numeric`	Digits 0–9 only	PINs, counts
`tel`	Dial pad	Phone numbers
`search`	Text keyboard with Search/Go key	Search fields
`email`	Text keyboard with `@` and `.`	Email fields
`url`	Text keyboard with `/`, `.`, `.com`	URL fields

<input type="text" inputmode="numeric" pattern="[0-9]*"
       placeholder="PIN" autocomplete="off">
<input type="text" inputmode="decimal" placeholder="Price">
<input type="search" inputmode="search">

`enterkeyhint`

Customises the label/icon shown on the Enter key of a mobile virtual keyboard.

Values: enter, done, go, next, previous, search, send

<input type="text" name="first-name" enterkeyhint="next">
<input type="text" name="last-name" enterkeyhint="done">
<input type="search" enterkeyhint="search">
<textarea enterkeyhint="send"></textarea>

`autocorrect` (cross-browser as of 2023)

Controls automatic spelling correction on the element. Supported by all major browsers.

Values: on or off

<input type="text" name="username" autocorrect="off" autocapitalize="off">
<textarea autocorrect="on"></textarea>
<input type="password" autocorrect="off">

`writingsuggestions` (cross-browser as of 2024)

Controls whether the browser offers AI-powered writing suggestions (autocomplete continuations) on the element.

Values: true or false

<!-- Disable AI writing suggestions for sensitive fields -->
<textarea name="legal-text" writingsuggestions="false"></textarea>
<textarea name="blog-post" writingsuggestions="true"></textarea>

`headingoffset` (prototyping — not yet cross-browser)

Shifts the visual rendering level of <h1>–<h6> elements by the given integer offset. Enables embedding components with their own heading hierarchy without breaking the document heading level.

<!-- Component uses h1-h3 internally, but is rendered as if they were h3-h5 -->
<article headingoffset="2">
  <h1>This renders visually as an h3</h1>
  <h2>This renders visually as an h4</h2>
</article>

`headingreset` (prototyping — not yet cross-browser)

Resets the heading offset to zero within the element’s subtree.

<section headingoffset="3">
  <h1>Appears as h4</h1>
  <aside headingreset>
    <h1>Back to h1 (reset)</h1>
  </aside>
</section>

1.7 — Autocomplete

`autocomplete`

Controls browser autofill behaviour. Applied to <form>, <input>, <select>, <textarea>. On <form> it sets the default for all contained controls.

Single-value tokens:

Token	Purpose
`on`	Allow autofill (default)
`off`	Disable autofill
`name`	Full name
`given-name`	First name
`additional-name`	Middle name
`family-name`	Last name / surname
`nickname`	Nickname
`username`	Username / handle
`new-password`	New password (triggers password manager save)
`current-password`	Current password (triggers password manager lookup)
`one-time-code`	OTP / SMS verification code
`organization-title`	Job title
`organization`	Company name
`street-address`	Full street address
`address-line1`, `address-line2`, `address-line3`	Address lines
`address-level1`	State / province
`address-level2`	City
`address-level3`	District
`address-level4`	Neighbourhood
`country`	Country code
`country-name`	Country name
`postal-code`	Postcode / ZIP
`cc-name`	Card holder name
`cc-number`	Credit card number
`cc-exp`	Card expiry (MM/YY)
`cc-exp-month`	Card expiry month
`cc-exp-year`	Card expiry year
`cc-csc`	Card security code
`cc-type`	Card type (Visa, etc.)
`transaction-currency`	Currency
`transaction-amount`	Amount
`language`	Preferred language
`bday`	Birthday (full date)
`bday-day`, `bday-month`, `bday-year`	Birthday components
`sex`	Gender / sex
`url`	Website URL
`photo`	Profile photo
`tel`	Full phone number
`tel-country-code`	Country dialling code
`tel-national`	National phone number
`tel-area-code`	Area code
`tel-local`	Local number
`tel-extension`	Extension
`impp`	Instant messaging URL
`email`	Email address

Compound tokens (section + token):

<input autocomplete="shipping street-address">
<input autocomplete="billing postal-code">
<input autocomplete="home tel">
<input autocomplete="work email">
<input autocomplete="mobile tel">

1.8 — Popover API (Global)

`popover`

Makes any element a popover — a floating overlay rendered in the browser’s top layer. Three modes:

popover="auto" (or just popover):

Light dismiss — closes when user clicks outside or presses Esc
Only one auto popover open at a time (opening another closes existing)
Exception: nested auto popovers coexist

popover="hint" (cross-browser January 2025):

Light dismissible like auto
Does NOT close auto popovers — they coexist
Only one hint open at a time
Ideal for tooltips alongside open menus
Opened via interestfor or JavaScript (not click)

popover="manual":

No automatic closing
Multiple can be open simultaneously
Must be closed explicitly

<!-- Auto popover: navigation menu -->
<button popovertarget="nav-menu">Navigation ▼</button>
<nav id="nav-menu" popover>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- Hint popover: tooltip -->
<button interestfor="save-tip">Save</button>
<div id="save-tip" popover="hint" role="tooltip">
  Save changes permanently (Ctrl+S)
</div>

<!-- Manual popover: toast notification -->
<div id="toast" popover="manual" role="status" aria-live="polite">
  Changes saved!
</div>

1.9 — Web Components

`slot`

Assigns the element to a named slot inside a Shadow DOM. Used with the <slot name="…"> element inside <template shadowrootmode>.

<my-card>
  <img slot="image" src="photo.jpg" alt="Product">
  <span slot="title">Widget Pro</span>
  <p>Default slot content</p>
</my-card>

`part`

Exposes shadow DOM internals for styling from outside using ::part().

<!-- Inside shadow DOM template -->
<button part="trigger close-button">✕</button>

<!-- Outside: page CSS styles exposed parts -->
<style>
  my-modal::part(trigger) { background: blue; }
  my-modal::part(close-button) { color: red; }
</style>

`exportparts`

Re-exports parts from a nested shadow DOM through an intermediate custom element, making deeply nested parts styleable from outside.

<!-- my-widget contains my-button which exposes part="btn" -->
<my-widget exportparts="btn: widget-btn">…</my-widget>

<!-- Now page CSS can style the re-exported part -->
<style>my-page::part(widget-btn) { … }</style>

`is`

Used with customised built-in elements — extends a native HTML element with custom element behaviour.

<button is="fancy-button">Click me</button>
<input is="validated-input" type="email">

1.10 — Security & Performance

`nonce`

A cryptographic nonce (number used once) for use with Content Security Policy (CSP). Allows a specific inline <script> or <style> to run even when CSP blocks inline scripts. The nonce must match the one in the Content-Security-Policy header.

<!-- CSP header: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // This script is allowed by CSP
  console.log('Allowed');
</script>

1.11 — Microdata

Microdata is a way to embed machine-readable data inside HTML, enabling search engines and tools to extract structured information.

`itemscope`

Boolean. Marks an element as a microdata item — its descendants contribute properties to this item.

`itemtype`

URL of the vocabulary defining the item’s type. Used alongside itemscope. Common vocabularies: https://schema.org/Person, https://schema.org/Product, https://schema.org/Event.

`itemprop`

Names a property of the nearest ancestor itemscope element. Its value comes from the element’s content (or content, href, src, value attributes depending on element type).

`itemid`

A global identifier (URL) for the item — used for items that have canonical identifiers in external databases.

`itemref`

Space-separated list of IDs of elements outside the itemscope that also contribute properties to this item.

<div itemscope itemtype="https://schema.org/Person" itemid="https://example.com/alice">
  <span itemprop="name">Alice Smith</span>
  <a itemprop="url" href="https://alice.example.com">Website</a>
  <span itemprop="jobTitle">Engineer</span>
  <span itemprop="worksFor" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">ACME Corp</span>
  </span>
</div>

1.12 — ARIA Global Attributes

All ARIA attributes prefixed with aria- can be applied to any HTML element. Listed here are the complete set of global ARIA attributes (usable on all roles) and the most commonly needed per-role attributes.

Naming & Description

Attribute	Purpose
`aria-label`	Provides an accessible name as a string
`aria-labelledby`	References ID(s) of elements whose text provides the accessible name
`aria-describedby`	References ID(s) of elements providing supplementary description
`aria-description`	Provides a description string directly (ARIA 1.3 draft)
`aria-braillelabel`	Braille-specific accessible name (requires `aria-label` or other name)
`aria-brailleroledescription`	Braille-specific role description (requires `aria-roledescription`)

Role

Attribute	Purpose
`role`	Overrides the element’s implicit ARIA role
`aria-roledescription`	Human-readable description of the role for screen readers

States

Attribute	Values	Purpose
`aria-checked`	`true`, `false`, `mixed`	Checked state of checkboxes, radios, switches
`aria-disabled`	`true`, `false`	Whether element is disabled
`aria-expanded`	`true`, `false`	Whether a disclosure/accordion/menu is expanded
`aria-hidden`	`true`, `false`	Remove from accessibility tree (never on focusable elements)
`aria-invalid`	`true`, `false`, `grammar`, `spelling`	Whether field value is invalid
`aria-pressed`	`true`, `false`, `mixed`	Pressed state of toggle buttons
`aria-required`	`true`, `false`	Whether field requires a value
`aria-selected`	`true`, `false`	Whether option/tab/gridcell is selected

Properties

Attribute	Values	Purpose
`aria-atomic`	`true`, `false`	Announce entire live region or only changed nodes
`aria-autocomplete`	`none`, `inline`, `list`, `both`	Autocomplete behaviour
`aria-busy`	`true`, `false`	Currently being updated (live regions)
`aria-controls`	ID list	IDs of elements this element controls
`aria-current`	`page`, `step`, `location`, `date`, `time`, `true`, `false`	Current item in a set
`aria-details`	ID	ID of element providing detailed description
`aria-errormessage`	ID	ID of element containing error message
`aria-flowto`	ID list	Alternative reading order
`aria-haspopup`	`false`, `true`, `menu`, `listbox`, `tree`, `grid`, `dialog`	Type of popup this triggers
`aria-keyshortcuts`	String	Keyboard shortcuts for this element
`aria-level`	Integer	Heading level or hierarchical level
`aria-live`	`off`, `polite`, `assertive`	Live region announcement mode
`aria-modal`	`true`, `false`	Whether dialog is modal
`aria-multiline`	`true`, `false`	Whether textbox accepts multiple lines
`aria-multiselectable`	`true`, `false`	Whether multiple items can be selected
`aria-orientation`	`horizontal`, `vertical`, `undefined`	Element orientation
`aria-owns`	ID list	IDs of elements owned by this element
`aria-placeholder`	String	Short hint for empty field
`aria-posinset`	Integer	Position in set
`aria-readonly`	`true`, `false`	Value is not editable
`aria-relevant`	`additions`, `removals`, `text`, `all`	Types of live region changes to announce
`aria-setsize`	Integer	Total size of the set
`aria-sort`	`none`, `ascending`, `descending`, `other`	Sort direction

Value Attributes

Attribute	Values	Purpose
`aria-valuemin`	Number	Minimum value
`aria-valuemax`	Number	Maximum value
`aria-valuenow`	Number	Current value
`aria-valuetext`	String	Human-readable value

Grid & Table Attributes

Attribute	Values	Purpose
`aria-colspan`	Integer	Number of columns spanned
`aria-rowspan`	Integer	Number of rows spanned
`aria-colindex`	Integer	Column index in grid
`aria-rowindex`	Integer	Row index in grid
`aria-colcount`	Integer	Total columns in grid
`aria-rowcount`	Integer	Total rows in grid

1.13 — data-* Custom Data Attributes

Any attribute beginning with data- followed by at least one character (no uppercase letters) is a valid custom data attribute. They store private data for JavaScript — they are not meant to convey meaning to browsers or assistive technologies.

<!-- data-* attributes -->
<article data-id="42" data-category="css" data-featured="true">…</article>

<!-- Accessing via JavaScript -->
<script>
  const article = document.querySelector('article');
  console.log(article.dataset.id);        // "42"
  console.log(article.dataset.category);  // "css"
  console.log(article.dataset.featured);  // "true"
</script>

<!-- CSS can select on data attributes -->
<style>
  [data-featured="true"] { border: 2px solid gold; }
</style>

Naming rules: After data-, the name must not contain uppercase letters, must have at least one character, and must be valid XML name characters. data-user-id → dataset.userId (hyphen-case converts to camelCase in JavaScript).

Tags: #html #vdsology #webdevelopment #vdsologyhtml #html5 #htmlreference #htmlreference2026

#dc2626; #html #vdsology #webdevelopment #vdsologyhtml #html5 #htmlreference #htmlreference2026

Write a comment

No comments yet.

Global Attributes - HTML reference 2026 vdsology

§Chapter 1 — Global Attributes

§1.1 — Core Identity & Classification

§id

§class

§style

§title

§1.2 — Language & Direction

§lang

§dir

§translate

§1.3 — Keyboard & Interaction

§tabindex

§accesskey

§autofocus

§1.4 — Editing & Input Behaviour

§contenteditable

§spellcheck

§draggable

§1.5 — Visibility & Availability

§hidden

§inert

§1.6 — Mobile & Input Mode

§autocapitalize

§inputmode

§enterkeyhint

§autocorrect (cross-browser as of 2023)

§writingsuggestions (cross-browser as of 2024)

§headingoffset (prototyping — not yet cross-browser)

§headingreset (prototyping — not yet cross-browser)

§1.7 — Autocomplete

§autocomplete

§1.8 — Popover API (Global)

§popover

§1.9 — Web Components

§slot

§part

§exportparts

§is

§1.10 — Security & Performance

§nonce

§1.11 — Microdata

§itemscope

§itemtype

§itemprop

§itemid

§itemref

§1.12 — ARIA Global Attributes

§Naming & Description

§Role

§States

§Properties

§Value Attributes

§Grid & Table Attributes

§1.13 — data-* Custom Data Attributes

How to Set Up a Business That Actually Grows — The Checklist 90% of Founders Skip - vdsology

CSS Reference 2026 — Chapter 1: Selectors and Specificity - vdsology

CSS Reference 2026 — Chapter 1: Selectors and Specificity - vdsology

Chapter 1 — Global Attributes

1.1 — Core Identity & Classification

`id`

`class`

`style`

`title`

1.2 — Language & Direction

`lang`

`dir`

`translate`

1.3 — Keyboard & Interaction

`tabindex`

`accesskey`

`autofocus`

1.4 — Editing & Input Behaviour

`contenteditable`

`spellcheck`

`draggable`

1.5 — Visibility & Availability

`hidden`

`inert`

1.6 — Mobile & Input Mode

`autocapitalize`

`inputmode`

`enterkeyhint`

`autocorrect` (cross-browser as of 2023)

`writingsuggestions` (cross-browser as of 2024)

`headingoffset` (prototyping — not yet cross-browser)

`headingreset` (prototyping — not yet cross-browser)

1.7 — Autocomplete

`autocomplete`

1.8 — Popover API (Global)

`popover`

1.9 — Web Components

`slot`

`part`

`exportparts`

`is`

1.10 — Security & Performance

`nonce`

1.11 — Microdata

`itemscope`

`itemtype`

`itemprop`

`itemid`

`itemref`

1.12 — ARIA Global Attributes

Naming & Description

Role

States

Properties

Value Attributes

Grid & Table Attributes

1.13 — data-* Custom Data Attributes