structure
<main>
Contains the dominant content of the document's <body> — the content unique to this page, excluding site-wide headers, nav, sidebars, and footers. Use exactly one visible <main> per page.
<main>...</main>Common attributes
| Attribute | Purpose |
|---|---|
| id | Target for skip-to-content links |
| class | Styling hook |
| role | ARIA override; role="main" is implicit |
Examples
<main id="content">...</main>Standard page main with skip-link target
<a href="#content">Skip to main</a>...<main id="content">...</main>Accessibility skip link pairing
<body><header>...</header><main>...</main><footer>...</footer></body>Typical landmark layout
Gotcha
A page must have only one
Related tags
<article>
Self-contained content that could be distributed independently — a blog post, news story, forum reply, or product card. Use it when the content would make sense syndicated or on its own page.
<section>
A thematic grouping of content that typically has a heading and belongs in a document outline. Use it when the content is a distinct chunk of a larger whole; use <article> instead if it stands alone.
<header>
Represents introductory content or a group of navigational aids for its nearest sectioning ancestor. Use it at the top of the page, or inside an <article> or <section> for that block's heading area.
<div>
Generic block-level container with no inherent semantic meaning, used to group content for styling or scripting. Reach for it only when no semantic element (section, article, nav, header) fits the content.
<span>
Generic inline container with no semantic meaning, used to style or script a run of text or inline content. Use it when semantic inline elements like <em>, <strong>, or <code> don't fit.