section
A thematic grouping of content, typically with a heading. Use for chapters, tabbed panels, numbered sections, or any content that would appear in an outline.
Usage
Use the <section> element for:
- Chapters or thematic groups within an article
- Each panel in a tabbed interface
- Major sections of a homepage (hero, features, testimonials)
- Numbered or labeled sections in documentation
A section should have a heading that identifies its content. If you cannot provide a meaningful heading, consider whether <div> would be more appropriate.
Examples
Default
Basic section with heading and content.
Default section
<section> <h2>Features</h2> <p>Our product offers a comprehensive set of features designed to improve your workflow.</p></section>.alt
Alternate background for visual rhythm between stacked sections.
Alternating sections
<section class="padded"> <h3>Regular Section</h3> <p>Default background section.</p></section><section class="alt padded"> <h3>Alternate Section</h3> <p>Raised background creates visual separation.</p></section><section class="padded"> <h3>Regular Section</h3> <p>Default background section.</p></section>.bordered
Top border for visual separation.
Bordered section
<section> <h3>Previous Section</h3> <p>Content above the border.</p></section><section class="bordered"> <h3>Bordered Section</h3> <p>This section has a top border to separate it from above content.</p></section>.hero
Hero section with centered content and minimum height.
Hero section
<section class="hero"> <h1>Welcome to Vanilla Breeze</h1> <p>A layered HTML component system for modern web development</p> <footer> <button type="button">Get Started</button> </footer></section>.grid
Auto-fit grid layout for card grids.
Grid section
<section class="grid"> <article class="card"> <h3>Feature One</h3> <p>Description of the first feature.</p> </article> <article class="card"> <h3>Feature Two</h3> <p>Description of the second feature.</p> </article> <article class="card"> <h3>Feature Three</h3> <p>Description of the third feature.</p> </article></section>.padded
Vertical padding for spacing between sections.
Padded section
<section class="padded"> <h2>Padded Section</h2> <p>Extra vertical padding creates visual separation between sections.</p></section>.full
Full-width section with padding, ideal for page-level sections.
Full-width section
<section class="full"> <h2>Full Width Section</h2> <p>Spans the entire width with generous padding on all sides.</p></section>.contained
Max-width container for centered content.
Contained section
<section class="contained"> <h2>Contained Section</h2> <p>Content is centered with a comfortable maximum width.</p></section>Sections within an article
Thematic grouping of content within an article.
Sections in article
<article class="blog"> <header> <h2>Complete Guide to Semantic HTML</h2> <p>A comprehensive tutorial</p> </header> <section> <h3>Introduction</h3> <p>Semantic HTML provides meaning to web content.</p> </section> <section> <h3>Sectioning Elements</h3> <p>HTML5 introduced several sectioning elements.</p> </section> <section> <h3>Conclusion</h3> <p>Using semantic elements improves accessibility.</p> </section></article>Variants
| Class | Description |
|---|---|
.padded |
Vertical padding (--size-xl) for spacing |
.full |
Full width with generous block and inline padding |
.contained |
Max-width 1200px, centered with horizontal padding |
.alt |
Raised background color for visual alternation |
.bordered |
Top border with padding for visual separation |
.hero |
Centered content, minimum 50vh height, generous padding |
.grid |
Auto-fit grid layout for responsive card arrangements |
Accessibility
- Sections with headings create region landmarks that screen readers can navigate to
- Always include a heading (h2-h6) to label the section content
- Use appropriate heading levels - don't skip levels for visual styling
- If a section has no meaningful heading, consider using
<div>instead - Hero sections should still have a proper h1 for the page title
- Grid sections should use semantic elements (like
<article>) for grid items when appropriate
Related
<article>- For self-contained, distributable content (section is for thematic grouping)<aside>- For tangentially related content (section is for primary content)<main>- Sections are often children of main<header>- Sections can have their own headers<hgroup>- For section headings with subtitles