0%

<section> Section

A themed group of content, normally with its own heading.

By HTML6 (opens in a new tab) · Updated · How we write and check content

A <section> groups content about one theme, like the chapters of a long page or the tabs of a profile. Each one should normally start with a heading.

For a plain box to hang styles on, use <div>. If the content stands on its own, <article> fits better. Give a section an accessible name (with aria-labelledby, say) and it becomes a region landmark.

The section element definition (opens in a new tab) warns against using it as a generic styling wrapper. See where it fits in the Article, Section, Aside lesson.

Syntax

<section>
  <h2>Section heading</h2>
  <p>Content</p>
</section>

When to use it

Sections split a long page or article into themed chunks that would show up in a table of contents: the chapters of a guide, the "Features", "Pricing" and "FAQ" parts of a landing page, the stages of a long form. If a heading can sum up the chunk, you are probably looking at a section.

Content that could be published on its own is an <article>. Related but secondary content is an <aside>. No heading, no theme, only a styling need? That is a <div>. Sections can contain articles and articles can contain sections, so both nestings are valid.

Resist giving every section an accessible name. Each named section becomes a region landmark, and a page with fifteen regions is as hard to navigate as a page with none. Name the few areas people really want to jump to. The semantic HTML versus div soup lesson shows how to choose between section and div.

Live example

Edit the code and watch the preview.

<h1>Pancake Guide</h1>
<section>
  <h2>Ingredients</h2>
  <p>Flour, milk, eggs.</p>
</section>
<section>
  <h2>Method</h2>
  <p>Mix and fry.</p>
</section>

More examples

Landing page with one named region

The landing page is split into themed sections, each starting with an h2. Only the pricing section is named with aria-labelledby, because it is the part visitors most want to jump to, so it alone becomes a region landmark.

<main>
  <h1>Bake at Home Kit</h1>
  <section>
    <h2>What is in the box</h2>
    <p>Flour, yeast, a proving basket and a recipe card.</p>
  </section>
  <section aria-labelledby="price">
    <h2 id="price">Pricing</h2>
    <p>One kit costs $29. Monthly refills cost $9.</p>
  </section>
</main>

Chapters inside an article

A long guide is one article, divided into sections for each chapter. The h1 names the guide and every section starts with an h2, so the heading list reads like a table of contents.

<article>
  <h1>Growing tomatoes on a balcony</h1>
  <section>
    <h2>Choosing a pot</h2>
    <p>Pick a pot of at least 20 liters with drainage holes.</p>
  </section>
  <section>
    <h2>Watering</h2>
    <p>Water deeply in the morning, less often but more at a time.</p>
  </section>
</article>

Tip: Need a box only for styling? Then you want a div.

Browser support

The section element came with HTML5 and is supported in all modern browsers. Without an accessible name it has no special role, so assistive technology treats it much like a div; with a name from aria-labelledby or aria-label it is exposed as a region landmark.

Accessibility

Put a heading on each important section and point aria-labelledby at it. The section is then exposed as a named region landmark. When exactly that happens is covered in the W3C landmark regions guide (opens in a new tab).

Common mistakes

Wrong

<section class="flex-row">
  <img src="a.png" alt="">
</section>

Right

<div class="flex-row">
  <img src="a.png" alt="">
</div>

section is for meaningful groups. A wrapper with no meaning should be a div.

Frequently asked questions

What is the difference between section and div?

<section> carries meaning. It groups a thematic block that would show up in a table of contents, and it normally opens with a heading. <div> means nothing and exists purely as a hook for styling or scripts. So a wrapper that is only there for CSS should be a div, and a block that forms a real part of the document outline should be a section. For the styling-hook case, see the div element.

Does a section need a heading?

Almost always. A missing heading is not a validation error, but the standard clearly expects one, and a section without a heading usually means a <div> would have been the better pick. A <section> also becomes a region landmark only once it has an accessible name, for example through aria-labelledby pointing at its heading.

Practise it

Related sections elements

<header>Introductory content: the site logo and navigation, or the top of an article.<nav>Wraps the major navigation links.<main>The page's unique, central content. One per page.<footer>Closing content for a page or section, like copyright, contacts and related links.<article>Self-contained content that makes sense alone, such as a post, card or comment.<aside>Content related to the main content but set apart from it, such as a sidebar.<h1>The top-level heading, naming what the page is about.<h2>A main section heading, one step below h1.<h3>A subsection heading inside an h2 section.<h4>Heading for a subsection of an h3 section.<h5>Fifth-level heading, used inside an h4 section.<h6>The lowest heading level, used inside an h5 section.<hgroup>Ties a heading to its subtitle or tagline paragraphs.<address>Contact details for the person or organization behind a page or article.<search>Wraps a search or filter form and creates a search landmark.