Section Tag Guide | SimpleAccess.io

The `<section>` Element

As defined in the HTML Living Standard, the <section> element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. A section, in this context, is a thematic grouping of content, typically with a heading.

Visual Example:

Project Overview

This section introduces the primary goals of the accessibility audit.

Methodology

This section describes the testing tools and WCAG versions used.

<article>
  <h1>Site Accessibility Report</h1>
  <section>
    <h2>Introduction</h2>
    <p>Content goes here...</p>
  </section>
</article>

View HTML Living Standard: The section element

Nesting and Headings

The primary rule of thumb for using <section> is that it should almost always include a heading (<h1>–<h6>) as a child.

Outline Logic: Sections help define the hierarchy of the document outline. If a group of content doesn't need a heading, it likely doesn't need a <section> tag and should use a <div> instead.
No Standalone Use: A section should not be used as a generic wrapper for styling; its purpose is to create a thematic break in the document's structure.

WCAG Requirement: Info and Relationships

Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.

While <section> is a semantic element, it does not act as a landmark for screen readers by default unless it is given an accessible name. To help users navigate more effectively, provide a label using aria-labelledby or aria-label. This satisfies the requirement by explicitly defining the purpose of the region.

<section aria-labelledby="sec-title">
  <h2 id="sec-title">Regional Data</h2>
</section>

Understand SC 1.3.1: Info and Relationships

Section vs. Article vs. Div

Choosing the right container is vital for clean document semantics:

<article>: Use when the content is "independently distributable" (e.g., a blog post, a comment, a widget).
<section>: Use when the content is a thematic grouping that is part of a larger whole (e.g., chapters of a book, tab panels).
<div>: Use when you only need a hook for CSS styling or JavaScript interaction and the content has no specific semantic theme.

The <section> Element