What the section tag is for
<section> groups content on one theme, and it starts with a heading that names that theme. A landing page split into "Features", "Pricing" and "FAQ" is a textbook case:
Each section is a chapter of the page, and each heading is a line in the page's table of contents. Like the other semantic tags, <section> has no default styling; the borders come from the CSS.
section vs article vs div
The three look the same on screen. What differs is what they say about the content:
| Element | Means | Test |
|---|---|---|
<article> | A complete, self-contained piece | Would it make sense published alone, on another site or in a feed? |
<section> | A themed part of a larger whole | Does it have (or need) a heading, and is it one chapter of something? |
<div> | Nothing: a styling or layout box | Is it only there for CSS or JavaScript? |
Blog posts, forum comments, news stories and product cards are articles. "Features", "Chapter 2" and "Related products" are sections. A flex row that lines up three cards is a div.
Articles inside a section
The two nest in both directions. Here a "Latest posts" section holds several independent articles:
Notice the <div class="grid">: it exists only to lay the cards out in a row, so a div is the right tag for it. Each card is an article because each post stands on its own.
Sections inside an article
A long article can be divided into sections, just like chapters in a book. The heading levels continue from the article's own heading:
The blue box is the article (the whole guide), the green bars are its sections. Give a section its own heading level: an h2 article holds h3 sections.
Named sections become landmarks
Screen readers list certain elements as landmarks that users can jump between. A <section> becomes a region landmark only when it has an accessible name. Point aria-labelledby at its heading:
<section aria-labelledby="pricing-title">
<h2 id="pricing-title">Pricing</h2>
...
</section>
Do this for the few sections a user would want to jump to directly, not for every section: a page with twenty landmarks is as hard to scan as one with none. Unnamed sections still help, because their headings show up in the screen reader's list of headings.
Sections also make good targets for in-page links. Give one an id and a link with href="#id" jumps to it:
Common mistakes
- Using
<section>as a styling wrapper. If there is no heading and no theme, use<div>. The semantic HTML page shows where each layout tag fits. - Wrapping a single blog post in
<section>. A post that stands on its own is an<article>. - Sections without headings. Add a heading, even a visually hidden one, or rethink whether it is a section.
- Replacing
<main>with<section>. The page's main content goes in<main>; sections go inside it. - Naming every section. Add
aria-labelledbyto the important ones only, so the landmark list stays short.
Frequently Asked Questions
What is the section tag in HTML?
<section> groups content that belongs to one theme, like a chapter of a document or the "Pricing" part of a landing page. It should normally start with a heading that says what the section is about.
What is the difference between section and div?
<section> says the content is a themed part of the document with its own heading. <div> says nothing; it is a box for styling or layout. If you only need a wrapper for CSS, use <div>.
What is the difference between section and article?
<article> is content that makes sense on its own, outside the page: a blog post, a comment, a product card. <section> is a part of something bigger that only makes sense in its context. Ask whether you could publish the piece alone: if yes, it is an article.
Can an article contain sections, and a section contain articles?
Yes, both. A long article can be split into sections, and a section such as "Latest posts" can hold a list of articles.
Does a section need a heading?
It should have one in almost every case, because the heading is what names the theme. If you cannot think of a heading for it, the content is probably not a section and a <div> fits better.
