The <main> element
The <main> tag marks the primary content of the document — the content unique to this page, excluding repeated elements like headers, footers, sidebars, or navigation. There should be exactly one visible <main> per page.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, palpable content |
| Content model | Flow content |
| Tag omission | Neither the start nor end tag can be omitted |
| Permitted parents | Any element that accepts flow content, but must not be a descendant of <article>, <aside>, <footer>, <header>, or <nav> |
| DOM interface | HTMLElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | <main> has no attributes of its own — only the global attributes shared by every HTML element. |
Common examples
The standard page skeleton
Header and footer repeat across the site; <main> holds what is unique to this page.
A target for a “Skip to content” link
Give main an id so keyboard users can jump straight past the menu.
A centered, readable content column
Limit the width of main and center it, so text never stretches across a wide screen.
Main with a sidebar
A sidebar of related links sits next to main, not inside it, as an <aside>.
<main> vs <body>
The <body> holds everything visible on the page: the header, navigation, sidebars, footer and the content itself. <main> holds only the part that is unique to this page — the article, the product, the search results — leaving out everything that repeats from page to page.
So a page has one body and, inside it, one visible main. Marking that main area helps screen reader users skip straight to the content and helps search engines tell the real content apart from the site-wide template.
| <main> | <body> | |
|---|---|---|
| Contains | Unique page content | Everything visible |
| How many | One visible per page | Exactly one |
| Includes header/footer | No | Yes |
Common mistakes to avoid
- More than one visible main. A page should have a single main area; additional ones must be hidden with the
hiddenattribute. - Putting the site header, menu or footer inside main. They repeat on every page, so they belong outside it.
- Nesting main inside an article, aside, header, footer or nav. That isn’t allowed; main sits at the top level of the page structure.
- Leaving it out entirely. Without main, screen reader users have no quick way to skip to the content.
Accessibility & SEO tips
- Main is a landmark: screen readers can jump straight to it, and a “Skip to content” link pointing at it helps keyboard users too.
- Put the page’s
<h1>at the start of main (or in the page header just above it), so the content starts with a clear title. - Search engines use the page structure to separate content from boilerplate, so keeping the real content inside main makes your page easier to understand.
- Don’t hide main content in tabs or accordions that only open with JavaScript — visitors and search engines should be able to reach the important text directly.
Browser support
Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds.
Tutorials: How to center a div, How to make a responsive website