How to Use the section Element — Group Content by Topic

The HTML section element groups content around a topic. It usually goes with a heading that tells readers what the topic is.

The answer first

A small example

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

The heading “Plans” tells readers what this group is about. aria-labelledby also tells the browser to use that visible heading as the section's name.

A section groups meaning

A section can group topics such as “Plans”, “How it works”, and “Contact”. It describes the meaning of the content. It is not just a box for a border or a background color.

For example, if a service page has separate topics called “What you can do” and “Pricing”, each topic can have its own section.

section, article, and div

Element	When to use it
section	A topic within a page needs its own heading
article	A blog post or comment can make sense on its own
div	You need a wrapper for styling or scripts, with no extra meaning

If you are unsure, ask whether this group needs its own heading and whether it could stand alone as a piece of content. For a post or other independent item, see the article element guide.

Choose heading levels yourself

Adding a section does not create a heading. Use a heading element from h1 to h6, and choose its level based on the page's heading structure.

For example, if the page title is h1, its main topics can use h2. A smaller topic inside one of them can use h3. The section element does not change a heading's number for you.

When should it be a named region?

When a section has a name, a browser can expose it as a region. A region is a way for assistive technology, such as a screen reader, to help people move to a major area of a page.

A heading inside a section does not always become the section's name by itself. Connect a visible heading with aria-labelledby, as in the example above. You do not need to turn every small group into a region. Use a named region for an important area that people may want to find directly.

Common mistakes

• Using section everywhere just to add color, spacing, or a border
• Expecting a section to create a heading for you
• Expecting a heading's level to change automatically inside a section
• Giving every small content group a screen-reader navigation landmark

Use div for a wrapper with no extra meaning. Use a heading with section when you are grouping a real topic.

How to Use h1–h6 explains heading levels with a short example.

Check the details in Atlas

For element categories, heading rules, accessibility roles, and browser and WPT observations, see the section element in Yugien Atlas.