HTML main Tag Explained: Usage, Examples & Best Practices
Introduction
When you start learning HTML, you quickly realize that building a webpage is not just about displaying content—it’s about structuring it properly. HTML provides different tags to organize content in a meaningful way.
In older HTML versions, developers used <div> for everything. But modern HTML introduced semantic elements like <header>, <nav>, <main>, and <footer> to clearly define different parts of a webpage.
Learn basics: /html-basics
Among these, the HTML main tag plays a crucial role. It represents the core content of a webpage—the part users actually came to see.
Think of <main> as the main story of a newspaper, while everything else (header, sidebar, footer) is supporting content.
What is main Tag?
The <main> tag is a semantic HTML element used to define the primary content of a webpage, excluding headers, footers, and navigation.
The <main> element contains the unique content of the page. This is the part that directly relates to the page’s topic.
It usually includes:
- Articles
- Sections
- Main text content
- Images related to the topic
Learn semantic HTML: /semantic-html-guide
The <main> tag defines the primary content of a webpage that is unique and directly related to the page’s purpose.
Basic Syntax of main
Here is a simple main tag example:
<main>
<h1>Welcome to My Website</h1>
<p>This is the main content of the page.</p>
</main>Explanation (Line by Line)
<main>→ Starts the main content section<h1>→ Main heading of the page<p>→ Paragraph content</main>→ Ends the main section
This defines the central part of your webpage.
Where to Use main Tag
The <main> tag is used to wrap the primary content of a webpage, excluding repeated elements like header, navigation, and footer.
The <main> element has specific usage rules.
Central Content Area
This is the most important use.
<main>
<h2>Blog Post</h2>
<p>This is the main article...</p>
</main>Inside Page Layout
Typical structure:
<body>
<header>Header content</header>
<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer</footer>
</body>Only One <main> Per Page
Unlike <header> or <nav>, you should use only one <main> element per page.
Real-World Examples
Let’s look at practical uses of the HTML main tag.
Example 1: Blog Page Layout
<body>
<header>
<h1>My Blog</h1>
</header>
<main>
<article>
<h2>Learn HTML</h2>
<p>This article explains HTML basics...</p>
</article>
</main>
<footer>
<p>Copyright 2026</p>
</footer>
</body>Why this works:
- Clear separation of content
- Easy for search engines
- Better readability
Example 2: Multiple Sections Inside Main
<main>
<section>
<h2>Services</h2>
<p>We offer web design...</p>
</section>
<section>
<h2>Contact</h2>
<p>Email us at...</p>
</section>
</main>Explanation:
<main>holds all primary sections- Each
<section>represents a topic
main vs div
Learn more: /html-tags-guide
| Feature | <main> | <div> |
|---|---|---|
| Meaning | Semantic | Non-semantic |
| Purpose | Main content | General use |
| SEO | Better | Poor |
| Accessibility | High | Low |
Simple Explanation:
<main>→ Defines main content clearly<div>→ Generic container
Best Practices
To use the <main> tag correctly, follow these tips:
1. Use Only Once Per Page
Avoid multiple <main> elements.
2. Keep It Unique
Content inside <main> should be unique to that page.
3. Don’t Include Repeated Content
Avoid placing:
- Navigation
- Footer
- Sidebar
inside <main>.
4. Use with Other Semantic Tags
Combine with:
<article><section>
Common Mistakes
Using Multiple <main> Tags
This breaks semantic structure.
Including Navigation Inside <main>
Navigation belongs in <nav>.
Using <main> for Styling Only
Always focus on meaning, not just design.
SEO Benefits of main
Using the HTML main tag improves SEO.
1. Clear Content Focus
Search engines understand your page topic better.
2. Better Accessibility
Screen readers jump directly to main content.
3. Improved Ranking Signals
Well-structured pages perform better in search results.
4. Enhanced User Experience
Users find content quickly.
FAQs Section
1. What is the main tag in HTML?
The <main> tag defines the primary content of a webpage.
2. Can I use multiple <main> tags?
No, only one <main> tag should be used per page.
3. What should not be inside <main>?
Navigation, header, and footer content should not be inside <main>.
4. Is <main> important for SEO?
Yes, it helps search engines identify the main content.
5. Can <main> contain sections?
Yes, it can include <section>, <article>, and other elements.