Syntax
<main>
<!-- primary page content -->
</main>Examples
Basic Page Structure
Using main to wrap the primary content of a page.
<header>...</header>
<nav>...</nav>
<main>
<h1>Product Details</h1>
<p>This is the main content unique to this page.</p>
</main>
<footer>...</footer>Main with Multiple Sections
A main element containing several content sections.
<main>
<section>
<h2>About Us</h2>
<p>...</p>
</section>
<section>
<h2>Our Services</h2>
<p>...</p>
</section>
</main>Skip Link Target
Using main as the target for a "skip to content" accessibility link.
<a href="#main-content">Skip to main content</a>
<nav>...</nav>
<main id="main-content">
<h1>Page Title</h1>
</main>Best practices
- Use exactly one <main> element per page, and never nest it inside <header>, <footer>, <nav>, <article>, or <aside>
- Give <main> an id so it can be used as a target for "skip to content" accessibility links
- Only include content in <main> that is unique to the current page — repeated site-wide elements belong outside it
- Screen reader users can jump straight to <main>, so make sure it truly contains the page's primary content
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<header>
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.