The HTML main element marks the principal content of the current page: the part that is unique to that page rather than repeated site material. Use only one main element per page. It typically follows the header and navigation. section 12.2.1
Think of main as the page’s working area. It can hold introductory text, headings, paragraphs, sections, an article with an aside, a gallery, cards, or content added later with JavaScript. Header, navigation, and footer remain separate areas. section 12.2.1 section 13.5
A simple page layout
Place site-wide identity and links first, then put the page-specific material inside main: <header>Site title</header> <nav>Page links</nav> <main> <h2>Welcome</h2> <p>Unique page content goes here.</p> </main> <footer>Copyright notice</footer> For a hobby-site home page, main can begin with a welcome paragraph and then contain a section for each subtopic. section 12.2.1 section 7.3.2
Use main to organize different kinds of page-specific content:
- A book-club introduction, current-reading details, and next-meetup information. section 4.1
- Journal entries built with summary and details elements. section 5.2.3
- An article and related sidebar arranged in columns. section 12.2.10
- An empty article that JavaScript later fills with course data. section 13.5
<header>
<h1>Antediluvian Word Preservation Society</h1>
<p>Preserving words from the past for the future</p>
</header>
<nav>
<a href="index.html">Home</a>
<a href="blog.html">Blog</a>
<a href="faq.html">FAQ</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<main>
Unique page content goes here
</main>
Inspect this compact layout to see main positioned after header and navigation, with the unique content kept between its opening and closing tags. section 12.2.1
