The <section> Element

Technical Summary

Definition / Categories

Item	Specification summary
Meaning	A general thematic group in a document or application, typically with a heading
Categories	Flow content, sectioning content, and palpable content
Context	Where sectioning content is expected
Content model	Flow content
Tag omission	Neither the start tag nor the end tag can be omitted
Content attributes	Global attributes
DOM interface	HTMLElement
HTML-AAM role mapping	region when it has an accessible name; otherwise generic

Meaning and scope

HTML Living Standard §4.3.3 defines section as a generic section of a document or application. In this context, a section is a thematic grouping that typically has a heading. Examples include chapters, pages in a tabbed interface, numbered sections of a paper, and groups such as an introduction, news, or contact details on a home page.

The Standard gives a general rule: use section when its contents would be listed explicitly in the document's outline. It also encourages div for a wrapper needed only for styling or scripting. This guidance does not mean that a browser creates a heading from the section element.

article is appropriate for a complete, self-contained composition that could in principle be reused or distributed on its own. section groups a topic within a larger document. The element name alone does not set colors, borders, or other presentation.

<article>
  <h1>Service overview</h1>
  <section aria-labelledby="plans-heading">
    <h2 id="plans-heading">Plans</h2>
    <p>Choose a plan that fits how you use the service.</p>
  </section>
</article>

Headings

section is not a heading element. It does not create a heading, heading text, heading level, or heading node in the DOM. Authors use h1 through h6 to provide explicit headings. The number in the heading element name provides its level; an ancestor section does not change that number automatically.

Choose heading levels to reflect the document's information structure. For example, use h1 for the page topic, h2 for its main topics, and h3 for a smaller topic within one of them. Check the heading elements that browsers and assistive technologies actually expose instead of relying on assumptions about an automatic outline algorithm.

The HTML definition that a section typically has a heading and the HTML-AAM computation of a section's accessible name are separate issues. A descendant heading does not necessarily become the section's accessible name by itself. Use aria-labelledby when that relationship needs to be explicit.

Accessibility / Region Role

The HTML-AAM 1.0 Working Draft (2026-10-21) maps a section with an accessible name to WAI-ARIA's region role, and an unnamed section to generic. A region is a landmark that helps assistive-technology users move to an important area of a page.

Markup	HTML-AAM role	Condition
<section>	generic	No accessible name; it is not exposed as a region landmark
<section aria-labelledby="heading-id">	region	The reference resolves to a non-empty accessible name
<section aria-label="...">	region	aria-label computes a non-empty accessible name
<section title="...">	region	title computes a non-empty accessible name

When a visible heading should name the region, reference its id with aria-labelledby. An empty value, whitespace-only value, or reference to a missing ID may leave the element without a name. The selected WPT cases for these boundaries passed. Chrome and WPT disagreed on the role for title=""; the implementation result is recorded below.

Landmarks are navigation targets for important page areas. Naming every small heading group as a region can make those targets harder to scan. Decide separately whether content needs the document structure of a section and whether it should be exposed as a named landmark. The native mapping usually removes the need to add role="region".

Fact / Evidence

HTML conformance and meaning, HTML-AAM mappings, WPT results, and Chromium Accessibility Tree observations are recorded as separate evidence types. In Chrome 155, a section with title="" appeared as a region with an empty name, while the selected WPT expects an unnamed generic. This difference remains unresolved.

Evidence

1. HTML Living Standard, §4.3.3 The section element — meaning, categories, context, content model, DOM interface, and authoring guidance.
2. HTML Living Standard, Headings and outlines — heading elements and sectioning structure.
3. HTML Accessibility API Mappings 1.0 Working Draft, 2026-10-21: section — conditional region/generic role mapping.
4. WAI-ARIA 1.2, region role — region role definition and landmark semantics.
5. WPT at revision 68d964a5f292bc4b2c2eba2f21e2b916190b6ad2: html-aam/roles-contextual.html — section's conditional computed role.
6. WPT at the same revision: html-aam/names.html — section name sources and precedence.

Implementation Evidence

Browser observations cover the four localized topic pages and a dedicated fixture in local Chromium. WPT runs use the pinned WPT checkout shown in the evidence rows. Chromium Accessibility Tree role/name results are implementation observations. They do not measure Windows UI Automation, another platform accessibility API, or screen-reader speech.

Dedicated fixture: section-v1 checks section identity, explicit heading levels, named and unnamed section role/name exposure, responsive layout, and theme controls. Full conditions, results, and unrun scope are recorded in docs/atlas/section-evidence-2026-10-27.md.

Coverage / Open Issues

• Specification checkedMeaning, categories, context, content model, DOM interface, and authoring guidance
• AAM mapping checkedConditional region/generic role and accessible-name sources
• Partial WPT resultSection name checks in names.html passed 8/8. In roles-contextual.html, 33/38 checks passed; Chrome reports region for section title="" where WPT expects generic. Two related empty-title cases fail, along with three unrelated image cases.
• OpenThe empty-title mapping difference, other browsers, Windows platform accessibility APIs, screen-reader speech, and the remaining HTML-AAM/WPT coverage

Related surfaces

• Yugien: a beginner-friendly guide to section
• h1–h6 elements: heading levels, outline, and accessibility
• article: independent content and its boundary with section
• Atlas日本語版: section要素
• main: primary content and placement rules
• nav: navigation areas and names