The <section> element
The <section> tag groups a standalone thematic block of content, typically with its own heading. Use it when a chunk of content would make sense as its own item in a document outline — if you’re only grouping elements for styling with no thematic meaning, use <div> instead.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, sectioning content, palpable content |
| Content model | Flow content, expected to include a heading |
| Tag omission | Neither the start nor end tag can be omitted |
| Permitted parents | Any element that accepts flow content |
| DOM interface | HTMLElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | <section> has no attributes of its own — only the global attributes shared by every HTML element. |
Common examples
Homepage sections, each with a heading
A landing page is often a series of sections, each starting with its own <h2>.
A section that screen readers list as a region
Connect the section to its heading with aria-labelledby. It then becomes a named region that assistive technology can jump to.
Chapters inside an article
Long articles can be split into sections, one per chapter.
A heading for screen readers only
If a section must not show a visible title, keep a heading anyway and hide it visually with CSS. Screen readers still announce it.
<section> vs <article>
Both group content under a heading, and the difference is independence. An <article> is self-contained: it would still make sense if you lifted it out and published it somewhere else, like a blog post, a news story, a product card or a comment. A <section> is one thematic part of something bigger, like “Features” or “Chapter 2”, and depends on its surroundings.
They can contain each other: a page can have sections full of articles (a “Latest posts” section), and an article can be divided into sections (its chapters).
| <section> | <article> | |
|---|---|---|
| Stands on its own | No | Yes |
| Examples | Features, Pricing, Chapter 2 | Blog post, comment, product card |
| Needs a heading | Usually | Usually |
Common mistakes to avoid
- Using section as a styling wrapper. If you only need a box to style, use a <div>.
- Sections without headings. A section is a titled part of a document; without a heading its purpose is unclear.
- Wrapping every paragraph in a section. Sections should group related content, not single paragraphs.
- Using section where
<main>,<nav>or<aside>fits better. The more specific element always says more.
Accessibility & SEO tips
- A section with an accessible name (from
aria-labelledbyoraria-label) is exposed as a “region” landmark; without one it’s just a group. - Clearly titled sections help search engines match each part of a long page to specific questions, which can lead to featured snippets.
- A tidy outline — one
<h1>, then a heading per section — makes pages easier to skim for everyone. - Name important sections with
aria-labelledbypointing at their heading, so screen reader users hear a meaningful name when they jump between regions.
Browser support
Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds. Screen readers in all major browsers announce a section that has an accessible name as a “region”.
Tutorials: How to add a background image, How to center a div, How to make a responsive website