<section>
A thematic part of a document, usually with its own heading.
- Display
- block
- Closing tag
- Required
- Permitted content
- Flow content
Example
#<section aria-labelledby="faq-title">
<h2 id="faq-title">Frequently asked questions</h2>
<p><strong>Do I need experience?</strong> No, we start from zero.</p>
<p><strong>How long does it take?</strong> You'll build your first page in a week.</p>
</section>Definition and usage
#The <section> element groups content around a single topic: a chapter of an article, a tab in an interface, or a "Pricing" or "FAQ" block on the home page. A section should have a heading, because that’s what tells you what the part is about.
The difference between <section> and <article> is simple: an article is self-contained, a section is part of something larger. And when you need a container purely for styling, with no meaning at all, reach for <div>.
A section with a name available to assistive technology (for example through aria-labelledby pointing at its heading) becomes a region that screen readers let you jump to quickly.
Syntax
#<section>
<h2>Section title</h2>
…
</section>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
Default CSS
#Most browsers display this element with these default styles:
section {
display: block;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Every section should have a heading. A section with no title is usually a sign that a
<div>is enough. - Connect a section to its heading with
aria-labelledby, so screen readers announce its name.
Related entries
#- <section> vs <article> vs <div><article> is self-contained content, <section> is a thematic part of something larger, and <div> is a neutral container with no meaning at all.
- <article>Self-contained content that makes sense read or shared on its own.
- <div>A generic block-level container with no meaning, for grouping elements and styling.
- <main>The page’s main, unique content. Only one should be visible per page.
- <aside>Tangential content loosely related to its surroundings: a callout box, a sidebar, a note.
- <h1>-<h6>Headings at six levels, from the most important h1 to the least important h6. Together they form the page’s outline.
Spotted a mistake or missing an example? Write to us.