The <main> Element

Technical Summary

Definition / Categories

Item	Specification summary
Meaning	The dominant contents of the document
Categories	Flow content and palpable content; not sectioning content
Context	Where flow content is expected, only if the ancestor elements are allowed
Content model	Flow content
Tag omission	Neither the start nor end tag may be omitted
Content attributes	Global attributes; no main-specific attributes
DOM interface	HTMLElement

“Dominant contents” does not mean the largest visual region or simply the first content in the document. It means content directly related to the document's central topic or function.

Document count and the hidden attribute

The HTML Standard's conformance rule is that a document must not contain more than one main element without a hidden attribute. This rule checks the attribute, not whether CSS currently displays the element.

<main>This document's content</main>
<main hidden>Content for another state</main>

An element hidden with display: none still lacks the hidden attribute, so it still counts for this conformance rule. Conversely, CSS can change how an element with hidden looks while the attribute remains in the DOM. Check HTML conformance separately from rendered visibility.

An iframe loads a separate Document. Each Document can have its own main.

Placement and ancestors

The HTML Standard limits the ancestors of a main element to:

• html, body, and div
• a form without an accessible name
• autonomous custom elements

Therefore, a main inside article, aside, footer, header, nav, or another main is non-conforming. In ordinary pages, placing it directly inside body or beneath only div elements makes the rule easy to check.

This hierarchy rule is an HTML conformance requirement. How a browser exposes a non-conforming element in its Accessibility Tree is a separate implementation observation.

Content model and DOM

The content model is flow content, so main can contain headings, paragraphs, lists, and articles. The main element is not sectioning content and does not create heading levels. Use h1–h6 to express the page title and heading hierarchy.

The HTML Standard defines no main-specific content attributes. The element accepts global attributes such as id, class, and lang. Its DOM interface is HTMLElement.

const main = document.querySelector('main');

console.log(main instanceof HTMLElement); // true
console.log(main.localName);              // "main"
console.log(getComputedStyle(main).display); // observe the browser's initial style

The HTML Standard defines a block-level default rendering for main. Site CSS can override it, so implementation reports should include the Computed Style of the page being measured.

Accessibility / HTML-AAM

The HTML-AAM 1.0 Working Draft (2026-10-21) maps the implicit role of main to the WAI-ARIA main role. WAI-ARIA defines main as a landmark. This gives browsers and assistive technologies a structural cue for reaching the document's central content.

The main role allows an author-provided accessible name, but WAI-ARIA does not require one. A single main landmark usually does not need an additional aria-label. Consider a label when multiple document contexts or main regions need to be distinguished.

The HTML placement rule and the role that a browser publishes in its Accessibility Tree are different facts. An observation in one browser does not establish results for every operating-system accessibility API or assistive technology.

Fact / Evidence

Normative requirements, accessibility mappings, browser observations, and the scope of WPT execution are kept distinct.

Evidence

1. HTML Living Standard, 4.4.14 The main element — meaning, categories, context, content model, hierarchy, and document cardinality.
2. HTML Accessibility API Mappings 1.0 Working Draft, 2026-10-21 — implicit role and platform API mappings.
3. WAI-ARIA 1.2, main role — landmark meaning, supported naming, and accessible-name requirement.
4. Selected WPT: reflection-grouping.html — the grouping-element reflection suite includes main; it does not cover all main placement or landmark rules.
5. WPT HTML DOM tests — source directory for the selected test.

Implementation Evidence

Browser observations and WPT were run in Chrome 156 on 2026-10-25. The fixture checked a normal main, the hidden attribute, a CSS-hidden main, and a separate Document inside an iframe. We also checked display width, theme, and role queries on all four pages. All 5,904 selected WPT checks passed, but this suite does not directly test main placement rules or landmarks.

Dedicated fixture: main-v1 compares a main with a correct ancestor hierarchy, the hidden attribute, CSS-hidden main, and a separate Document inside an iframe. It deliberately has two mains without hidden in the same Document, so the fixture is for observation rather than a conforming page example. The fixture is docs/atlas/main-v1-fixture.html; the run record is docs/atlas/main-evidence-2026-10-25.md.

A passing selected WPT file does not establish that every main placement rule, browser, operating-system accessibility API, or assistive technology was tested.

Coverage / Open Issues

• Specification checkedMeaning, categories, context, content model, cardinality, ancestors, and DOM interface
• Specification checkedHTML-AAM main-role mapping and WAI-ARIA landmark / accessible-name requirements
• Partly observedChrome 156, standard and narrow viewports, light and dark themes, main role query on all four pages, and 5,904 selected WPT passes. See Implementation Evidence for scope.
• OpenOther browsers, Windows UI Automation, IAccessible2, and assistive-technology speech

The served WPT commit was not available. Results from the selected WPT file are not presented as verification of every HTML Standard placement rule.

Related surfaces

For a beginner-friendly explanation, see the Yugien page about the main element. A standalone post inside the primary content is covered by the article element; document boundaries for embedded content are covered by the iframe element; links are covered by the a element.