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.
Features
Our product offers a comprehensive set of features designed to improve your workflow.
.padded
Vertical padding for spacing between sections.
Padded Section
Extra vertical padding creates visual separation between sections.
.full
Full-width section with padding, ideal for page-level sections.
Full Width Section
Spans the entire width with generous padding on all sides.
.contained
Max-width container for centered content.
Contained Section
Content is centered with a comfortable maximum width.
.alt
Alternate background for visual rhythm.
Regular Section
Default background section.
Alternate Section
Raised background creates visual separation.
Regular Section
Default background section.
.bordered
Top border for visual separation.
Previous Section
Content above the border.
Bordered Section
This section has a top border to separate it from above content.
.hero
Hero section with centered content and minimum height.
Welcome to Vanilla Breeze
A layered HTML component system for modern web development
.grid
Auto-fit grid layout for card grids.
Feature One
Description of the first feature.
Feature Two
Description of the second feature.
Feature Three
Description of the third feature.
Combining variants
Multiple classes can be combined for complex layouts.
Full Width Alternate Section
Combines full-width with alternate background.
Sections within an article
Thematic grouping of content within an article.
Complete Guide to Semantic HTML
A comprehensive tutorial
Introduction
Semantic HTML provides meaning to web content, making it more accessible and maintainable.
Sectioning Elements
HTML5 introduced several sectioning elements including article, section, nav, and aside.
Conclusion
Using semantic elements improves accessibility and SEO while making code more readable.
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 Elements
<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