<main>
The page’s main, unique content. Only one should be visible per page.
- Display
- block
- Closing tag
- Required
- Permitted content
- Flow content
Example
#<a href="#content">Skip to content</a>
<header>Logo and menu</header>
<main id="content">
<h1>HTML course from scratch</h1>
<p>Build your first page in seven days.</p>
</main>
<footer>© 2026 CodeWorlds</footer>Definition and usage
#The <main> element covers the document’s most important content, meaning the reason the user came to the page in the first place. It shouldn’t contain elements repeated across many pages: the logo, main navigation, footer, or a cookie banner.
A page can have only one visible <main> element. Several are allowed only when the rest carry a hidden attribute, for example in an app that switches views without reloading.
Thanks to <main>, screen readers and "Skip to content" links jump straight to the right part of the page, bypassing the header and menu.
Syntax
#<main>
…
</main>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
Default CSS
#Most browsers display this element with these default styles:
main {
display: block;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#<main>can’t be a descendant of<article>,<aside>,<footer>,<header>, or<nav>.- Add a "Skip to content" link at the top of the page pointing to the
<main>element’sid.
Related entries
#- <header>An introduction to a page or section: logo, title, navigation, author info.
- <footer>A page or section’s footer: author, copyright, links, contact info.
- <article>Self-contained content that makes sense read or shared on its own.
- <section>A thematic part of a document, usually with its own heading.
Spotted a mistake or missing an example? Write to us.