HTML main Tag: How to Create a Primary Content Area

The <main> tag in HTML marks the central content of a webpage. It tells browsers and assistive technologies where the core information begins. Use it to improve the clarity of your HTML structure.

Understand the main Tag in HTML

The <main> tag defines the main content area of an HTML document. Use this simple syntax:

<main>
  <!-- Main content here -->
</main>

The tag shows which content is unique to the page. It excludes:

• Navigation links
• Footers
• Sidebars
• Repeated blocks

Screen readers can jump directly to <main>, It improves accessibility for users.

Place the <main> tag once per page. It holds the content that relates to the main purpose of the document. Do not nest <main> inside other elements like <article> or <aside>

Here is a basic example:

<main>
  <h1>About Our Company</h1>
  <p>We create solutions for modern businesses.</p>
</main>

This example shows a heading and a paragraph inside <main>.

So, why should <main> be unique and not repeated?

You must use only one <main> element on a page. Multiple <main> tags confuse assistive tools and break the semantic structure. One clear main content area ensures better accessibility and indexing.

Place <main> directly inside the <body>. Keep it separate from repeated site sections like headers or footers. For example:

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

This layout makes the page easier to navigate.

The Difference between <main> Tag and <div id="main"> in HTML

A <div id="main"> is just a generic container. It carries no inherent meaning.

While, the <main> has semantic value. It signals that the content is primary. Search engines and assistive technologies recognize it.

Here is an example with div:

<div id="main">
  <h1>Home Page</h1>
  <p>Welcome to our site.</p>
</div>

And here is another one for the main tag:

<main>
  <h1>Home Page</h1>
  <p>Welcome to our site.</p>
</main>

The <main> tag tells browsers this area is the focus of the page.

The HTML main Tag with CSS

You can style <main> like any other element. Use CSS to control layout and visual design.

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

This CSS centers the main content horizontally on the page. The max-width property limits how wide the content stretches, so lines of text remain easy to read.

When you add padding, it creates space inside the <main> element. This space keeps text and other elements away from the edges.

You can also set background colors or typography styles.

main {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  font-family: Arial, sans-serif;
}

This example adds a light background, a thin border with a clear font. It improves the visual structure without altering its purpose when you style the <main> tag.

Examples of the HTML main Tag

Simple Content Block

<main>
  <h1>Services</h1>
  <p>We offer design and development.</p>
</main>

This layout defines the main section for a services page. The <main> element includes a title and a short description.

Article List

<main>
  <h1>Blog</h1>
  <article>
    <h2>Latest News</h2>
    <p>Read updates about our projects.</p>
  </article>
  <article>
    <h2>New Features</h2>
    <p>Discover what we plan to release.</p>
  </article>
</main>

<main> wraps articles that form the main content. Each <article> has its own title and text.

Product Overview

<main>
  <section>
    <h1>Product Details</h1>
    <p>Our product helps you track tasks easily.</p>
  </section>
  <section>
    <h2>Specifications</h2>
    <ul>
      <li>Fast performance</li>
      <li>Secure data storage</li>
    </ul>
  </section>
</main>

This structure uses <section> to group related content within <main>. Headings and lists provide clear information.

Landing Page Content

<main>
  <h1>Welcome to Our Platform</h1>
  <p>Join thousands who trust our solutions every day.</p>
  <a href="/signup">Get Started</a>
</main>

The main area includes a call to action and a heading. This shows a focused content block for new visitors.

The main Tag with CSS:

<style>
  main {
    display: flex;
    gap: 24px;
    padding: 24px;
  }
  
  main > section {
    flex: 1;
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
</style>
<main>
  <section>
    <h2>Features</h2>
    <p>Explore the core functionality of our platform.</p>
  </section>
  <section>
    <h2>Price</h2>
    <p>Find the right plan that fits your needs and budget.</p>
  </section>
</main>

• display: flex; turns the <main> container into a flexible row layout.
• gap: 24px; adds space between the sections inside <main>.
• Each <section> expands equally with flex: 1. It creates a responsive layout.
• border-radius and box-shadow add subtle visual enhancements.
• This layout is useful for dashboards or split-content designs.

Wrapping Up

In this article, you learned what the <main> tag does and why it matters for HTML structure. Here is a quick recap:

• The <main> tag defines the central content of a page.
• You must use it only once per document.
• It carries semantics that improve accessibility.
• The style <main> is simple and works like any container.
• Use <main> instead of generic <div> elements when possible.

FAQs

Welcome to My Site
<p>This is the main content area.</p>

Similar Reads