main
The dominant content of the document body. Contains the primary content unique to the page, excluding headers, footers, navigation, and sidebars.
Usage
Use the <main> element for:
- The primary content area of a page
- Content that is unique to this specific page
- The target for skip links ("Skip to main content")
Important: There should only be one visible <main> element per page. If using multiple for SPA views, only one should be visible at a time (hide others with hidden attribute).
Examples
Default
Basic main element without additional styling.
Page Content
This is the main content area of the page.
.contained
Centered with max-width of 1200px.
Content is contained to a comfortable reading width and centered on the page.
.narrow
Optimized for reading content (65ch max-width).
Narrow layout is ideal for long-form reading content like blog posts and documentation, keeping line lengths comfortable.
.wide
Expanded width (1600px) for dashboards and data-heavy layouts.
Wide layout provides more horizontal space for complex interfaces, data tables, and dashboards.
.full
Full viewport width with side padding.
Full-width layout spans the entire viewport with consistent padding.
.with-sidebar
Two-column layout with sidebar.
Main Content
Primary content area that takes up the majority of the space.
.padded
Adds vertical padding for spacing.
Padded main has generous vertical spacing, useful when the parent container does not provide padding.
.flex
Flexbox layout to fill available vertical space.
Flex main fills all remaining vertical space between header and footer.
Full page structure
Complete page layout example.
Page Title
Page content with proper semantic structure.
Variants
| Class | Description |
|---|---|
.contained |
Max-width 1200px, centered with horizontal padding |
.narrow |
Max-width 65ch for comfortable reading |
.wide |
Max-width 1600px for dashboards and complex UIs |
.full |
Full width with horizontal padding |
.with-sidebar |
Grid layout with main content and sidebar columns |
.padded |
Adds vertical padding (--size-xl) |
.flex |
Flex container that fills available vertical space |
Accessibility
- The main element creates a main landmark for screen reader navigation
- Only one visible main element per page (others must have
hiddenattribute) - Skip links should target the main element:
<a href="#main">Skip to content</a> - Add
id="main"and optionallytabindex="-1"to receive focus from skip links - Main should not be nested inside article, aside, footer, header, or nav