Syntax
<section>
<h2>Section Title</h2>
<p>Section content...</p>
</section>Examples
Landing Page Sections
Breaking a page into distinct thematic sections.
<section>
<h2>Features</h2>
<p>Everything you need to learn to code.</p>
</section>
<section>
<h2>Pricing</h2>
<p>Free forever for individual learners.</p>
</section>Section Within an Article
Using sections to divide a long article into parts.
<article>
<h1>The Complete Guide to Flexbox</h1>
<section>
<h2>What is Flexbox?</h2>
<p>Flexbox is a one-dimensional layout model...</p>
</section>
<section>
<h2>Main Properties</h2>
<p>justify-content, align-items, and flex-direction...</p>
</section>
</article>Styled Section
A visually separated content section.
<section style="padding: 40px 20px; background: #f9fafb; border-radius: 12px;">
<h2 style="margin-bottom: 12px;">Why Choose Us</h2>
<p>We focus on practical, hands-on learning.</p>
</section>Best practices
- Only use <section> when the content is thematically related and would make sense with its own heading
- If you just need a styling hook with no semantic meaning, use <div> instead
- Give each <section> a heading (<h2>-<h6>) so it makes sense in a document outline
- Do not use <section> as a wrapper purely for CSS layout purposes — that dilutes its semantic value
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<header>
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<article>
The <article> element represents a self-contained piece of content that could theoretically be distributed or reused independently — like a blog post, news story, forum post, or product card. The key test is whether the content would still make sense if syndicated on its own, separate from the rest of the page. Articles can be nested (e.g., a blog post article containing comment articles).
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<article>
The <article> element represents a self-contained piece of content that could theoretically be distributed or reused independently — like a blog post, news story, forum post, or product card. The key test is whether the content would still make sense if syndicated on its own, separate from the rest of the page. Articles can be nested (e.g., a blog post article containing comment articles).