The HTML <section> tag
The HTML <section> element represents a thematic grouping of content, almost always introduced by a heading. Use it for a distinct part of a page (a chapter, a group of features) — not as a generic styling wrapper, which is what a <div> is for.
Overview
The <section> element marks a standalone, thematic part of a document — a chunk of content that would earn its own entry in the page's outline. Chapters, tabbed panels, a "Features" block, a group of related settings: if the content has a single theme and would naturally carry its own heading, a <section> is the right wrapper.
What it is not is a generic box. When you only need a hook for styling or layout, reach for a <div> instead — it carries no meaning and won't clutter the outline. And when the content is self-contained enough to stand on its own elsewhere, like a blog post or a comment, an <article> is the better fit. The quickest gut-check: an article could be syndicated, a section is a thematic part of something larger, and a <div> means nothing at all.
On its own a plain <section> does little for accessibility — but give it an accessible name, usually a heading referenced with aria-labelledby, and it is exposed as a region landmark that screen-reader users can navigate to directly. So lead each section with a real heading; it helps both the outline and assistive technology.
Syntax
<section>
<h2>Features</h2>
<p>…</p>
</section>Example
<section style="border:1px solid #e2e8f0;padding:12px;border-radius:8px;">
<h2 style="margin-top:0;">Pricing</h2>
<p>Choose the plan that fits your team.</p>
</section>Best practices
- Start each
<section>with a heading (<h2>–<h6>) so it has a clear place in the document outline. - Do not use it as a styling wrapper — when an element carries no meaning, a <div> is the correct choice.
- Reach for <article> instead when the content is self-contained and could be distributed on its own.
- To expose a section as a navigable region landmark, give it an accessible name with aria-labelledby pointing at its heading.
Frequently asked questions
What is the difference between section and div?
<section> is a meaningful, thematic grouping that belongs in the document outline; a <div> has no meaning and is only a hook for styling or scripting. Use <section> when the content has a theme and a heading.What is the difference between section and article?
<section> is a thematic part of a larger whole. A blog post is an article; the "Comments" block within it is a section.