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 within a page structure.
Default main
<header class="site"> <strong>Site</strong></header><main> <h2>Page Content</h2> <p>This is the main content area of the page.</p></main><footer class="minimal"> <p>Site Footer</p></footer>.contained
Centered with max-width of 1200px.
Contained main
<main class="contained"> <h2>Contained Layout</h2> <p>Content is contained to a comfortable reading width (1200px) and centered on the page.</p></main>.narrow
Optimized for reading content (65ch max-width).
Narrow main
<main class="narrow"> <h2>Narrow Layout</h2> <p>Ideal for long-form reading content like blog posts and documentation, keeping line lengths comfortable at 65ch max-width.</p></main>.wide
Expanded width (1600px) for dashboards and data-heavy layouts.
Wide main
<main class="wide"> <h2>Wide Layout</h2> <p>More horizontal space for complex interfaces, data tables, and dashboards at 1600px max-width.</p></main>.full
Full viewport width with side padding.
Full-width main
<main class="full"> <p>Full-width layout spans the entire viewport with consistent padding.</p></main>.with-sidebar
Two-column layout with sidebar.
Main with sidebar
<main class="with-sidebar"> <article> <h2>Main Content</h2> <p>Primary content area that takes up the majority of the space.</p> </article> <aside class="sidebar"> <h4>Sidebar</h4> <p>Secondary content or navigation.</p> </aside></main>.padded
Adds vertical padding for spacing. Combine with other variants.
Padded main
<main class="padded contained"> <p>Padded main has generous vertical spacing, useful when the parent container does not provide padding.</p></main>Full page structure
Complete page layout example.
Full page layout
<header class="site"> <strong>Site</strong> <nav class="horizontal pills"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav></header><main class="contained padded"> <h2>Page Title</h2> <p>Page content with proper semantic structure.</p></main><footer class="minimal"> <p>Footer content</p></footer>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