Home » HTML main Tag Explained: Usage, Examples & Best Practices

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

What is the <main> tag in HTML?

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>
MeaningSemanticNon-semantic
PurposeMain contentGeneral use
SEOBetterPoor
AccessibilityHighLow

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.

Scroll to Top