main Element in HTML
Primary Content for SEO and Accessibility
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.
Comments
Loading comments...