HTML main Element

Imagine your page as a book. The <header> is the cover, the <nav> is the table of contents — but the <main>? That’s the core narrative. It's where your most valuable, unique content lives.

The <main> element represents the central content of a document — the part that's directly related to or expands upon the primary purpose of that page. It should be unique and must not contain items that repeat across pages like logos, navbars, or sidebars.

Using <main> improves accessibility, outlines your page more clearly for screen readers, and helps search engines focus on what really matters. It’s a semantic signal for: “Start indexing here.”

<main>
  <h1>Welcome to Fruit World</h1>
  <p>Explore sweet, sour, and juicy fruits from across the globe.</p>
</main>

Welcome to Fruit World  
Explore sweet, sour, and juicy fruits from across the globe.

• Use only one <main> per document
• Don’t place <main> inside <article>, <header>, <footer>, or <nav>
• It should only contain content specific to that page, not global UI

<body>

  <header>
    <h1>Fruit Daily</h1>
    <nav>
      <a href="/apple">Apple</a>
      <a href="/banana">Banana</a>
    </nav>
  </header>

  <main>
    <h2>Fruit of the Week: Cherry</h2>
    <p>Cherries are red, tart, and rich in antioxidants.</p>
    <section>
      <h3>Health Benefits</h3>
      <p>They help reduce inflammation and improve sleep quality.</p>
    </section>
  </main>

  <footer>
    <p>© 2025 Fruit Daily</p>
  </footer>

</body>

Search engines and assistive technologies rely on meaningful structure to rank and read. <main> makes the job easier by:

• Isolating primary content from the rest of the layout
• Improving screen reader navigation through document landmarks
• Boosting SEO relevance by helping bots ignore repetitive layout

Assistive tech users can jump straight to <main> with one keyboard command — saving time and effort.

<main>

  <article>
    <h2>Banana Bread Recipe</h2>
    <p>A delicious way to use ripe bananas.</p>
  </article>

  <article>
    <h2>Apple Cider Guide</h2>
    <p>Learn how to brew the perfect cider at home.</p>
  </article>

</main>

• <header> with logo and nav
• <footer> with contact info
• <aside> for unrelated widgets or ads

The <main> element highlights what truly matters on your page. You’ve learned how to:

• Use <main> to wrap primary content
• Apply best practices for unique placement
• Enhance both SEO and accessibility with semantic clarity

Choose the option that lists all and only the correct statements.

1. Improved screen reader navigation
2. Better SEO by signaling main content
3. Grouping of footer content
4. Avoiding duplicate main content areas

Choose the option that lists all and only the correct statements.

1. The main article or blog post
2. Primary product descriptions on an ecommerce site
3. Site-wide navigation menus
4. User comments section related to main content

Now that you’ve mastered your main content block, let’s explore <figure> and <figcaption> — perfect for adding meaningful images and descriptions.