main Element in HTML
Primary Content for SEO and Accessibility

Semantic HTML

HTML <main> Element: Where the Story Truly Begins

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.

What Is the <main> Element?

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.

Why Use <main>?

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.”

Basic Syntax

<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.

Rules of the Road

  • 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

Example: Simple Page Layout

<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>

SEO & Accessibility Benefits

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.

Example: Blog Page Structure

<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>

What Not to Include in <main>

Avoid putting global or repetitive content like:
  • <header> with logo and nav
  • <footer> with contact info
  • <aside> for unrelated widgets or ads

Summary

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

What’s Next?

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

QUIZ

Question 1:What is the main purpose of the <main> element in an HTML document?

Question 2:There should only be one <main> element per HTML document for semantic clarity and accessibility.

Question 3:Which of the following are benefits of correctly using the <main> element?

Question 4:Can the <main> element be nested inside <article> or <section> elements?

Question 5:The <main> element is important for SEO because it helps search engines identify the core content of the page.

Question 6:Which content is appropriate to place inside a <main> element?