The <main> tag in HTML represents the main unique content of a web page. It is the central area that contains the content users came to read, watch, learn, or use. On a tutorial page, the main area usually contains the tutorial itself. On a product page, it contains the product information. On a search page, it contains the search results. The tag is semantic, so it tells browsers and assistive technologies that this region is the primary content of the document.
The <main> tag is not a visual layout shortcut. It does not automatically create a special design, margin, grid, or container. CSS controls the appearance. The job of <main> is meaning. It separates the page’s important unique content from repeated areas such as the site header, navigation menu, sidebar, and footer.
Basic Syntax of Main Tag in HTML
The basic syntax is simple. Place the primary page content between opening and closing <main> tags. The content inside can contain headings, paragraphs, images, articles, sections, forms, tables, code blocks, and other normal HTML elements.
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/html/">HTML</a>
</nav>
</header>
<main>
<h1>Main Tag in HTML</h1>
<p>The main tag contains the primary content of this page.</p>
</main>
<footer>
<p>Copyright 2026</p>
</footer>
</body>In this structure, the header and footer are repeated site areas. The <main> element contains the page-specific content. If a user jumps directly to main content, they skip the repeated navigation and arrive at the useful part of the page faster.
Why Main Tag Matters
The <main> tag improves page structure because it clearly marks the most important content region. Without it, browsers and assistive technologies must infer the central content from generic containers, class names, or visual layout. A class like content may help developers, but it does not carry the same native semantic meaning as <main>.
For accessibility, <main> is especially useful because it creates a main landmark. Screen reader users can jump directly to this landmark instead of listening through the logo, menu, search box, advertisements, and other repeated areas on every page. This is one of the simplest semantic improvements you can make to a layout.
Use main for the content that makes this page different from other pages.
One Main Element Rule
A normal HTML document should have only one visible <main> element. The reason is logical: a page should have one primary content area. If there are multiple visible main regions, the document becomes confusing because assistive technology users may hear more than one main landmark.
There are advanced cases where hidden main elements exist in application-style interfaces, but beginners should follow the practical rule: one page, one visible <main>. Use <section>, <article>, <aside>, or <div> inside it when you need smaller content groups.
<!-- Good -->
<main>
<article>
<h1>HTML Tutorial</h1>
<p>This is the main tutorial content.</p>
</article>
</main>
<!-- Avoid -->
<main>First main area</main>
<main>Second main area</main>What Should Go Inside Main
| Content type | Should it be inside main? |
|---|---|
| Page heading and main article | Yes, this is primary page content. |
| Product details on a product page | Yes, this is the reason for the page. |
| Search results on a search page | Yes, these results are the main content. |
| Site logo and global menu | No, these usually belong in header and nav. |
| Copyright and footer links | No, these usually belong in footer. |
| Related posts sidebar | Usually no, unless it is truly part of the main task. |
Main Tag with Article and Section
The <main> tag often contains <article> and <section> elements. This is not a conflict. The main element identifies the primary region of the page. Inside that region, article and section elements organize the content into more specific pieces.
<main>
<article>
<header>
<h1>Structures in C</h1>
<p>Learn how structures group related data in C.</p>
</header>
<section>
<h2>What is a Structure?</h2>
<p>A structure is a user-defined data type.</p>
</section>
<section>
<h2>Structure Syntax</h2>
<p>The struct keyword is used to define a structure.</p>
</section>
</article>
</main>This is a strong structure for tutorials and blog posts. The main element says, “This is the primary content area.” The article says, “This content can stand on its own.” Each section says, “This is one meaningful part of the article.”
Main Tag and Skip Links
Many accessible websites include a skip link at the top of the page. A skip link lets keyboard users move directly to the main content. The target is commonly the <main> element or an element inside it. This is useful because keyboard users otherwise have to tab through the same navigation links on every page.
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">
<h1>HTML Lessons</h1>
<p>Start learning HTML from the basics.</p>
</main>The skip link should become visible when focused, not permanently hidden from keyboard users. CSS usually handles that behavior. The important HTML idea is that <main> gives the skip link a clear destination.
Main Tag vs Div
A <div> can visually wrap the same content, but it does not explain that the content is the main region. Use <main> when the wrapper represents the page’s primary content. Use <div> when you only need a generic layout container with no special meaning.
| Choice | Meaning |
|---|---|
<main> | Primary unique content of the page. |
<div class="main"> | Generic container with a class name. Meaning depends on developer convention. |
<article> | Standalone content, often placed inside main. |
<section> | Thematic group of related content, often placed inside main. |
Main Tag in Real Website Layouts
In a real website, the <main> element usually sits between the site header and the site footer. That sounds obvious, but it becomes important when the page has sidebars, ads, sticky menus, and related content. The main element should still point to the core content. A layout can have columns visually, but the semantic structure should remain clear.
<body>
<header>Site header and main menu</header>
<main>
<article>
<h1>Variables in C</h1>
<p>The tutorial content appears here.</p>
</article>
</main>
<aside>
<h2>Related C Topics</h2>
<p>Extra supporting links appear here.</p>
</aside>
<footer>Site footer</footer>
</body>The aside may appear beside the main content on desktop, but that does not automatically make it part of <main>. If it is secondary supporting content, keeping it outside main can make the page structure cleaner. On smaller screens, CSS may move the aside below the article, while the semantic meaning stays the same.
Main Tag in Web Applications
The <main> element is also useful in dashboards and web applications. A dashboard may have a top bar, sidebar navigation, notification panel, and a central working area. The central working area is usually the main content because it changes when the user moves between dashboard pages. The sidebar navigation and account menu are repeated interface areas and normally stay outside main.
In single page applications, the content inside <main> may change without a full page reload. The semantic idea remains the same: keep one primary region and update its contents responsibly. If the app changes the main heading and content, keyboard focus and page announcements should also be considered so users understand that the view has changed.
How to Check Main Tag Usage
A simple way to test your use of <main> is to temporarily ignore the visual design and read the page as a document. Ask what content the user actually came for. That content should be inside main. Then ask which areas repeat across many pages. Those repeated areas usually belong outside main, even if they appear visually close to the article.
You can also inspect the page with browser accessibility tools or a screen reader landmark shortcut. If the main landmark takes you to the useful content immediately, the structure is probably good. If it takes you to menus, ads, or unrelated widgets first, the main region needs to be cleaned up.
For a blog or tutorial website, this check is especially useful because every article page has repeated branding, navigation, related links, and footer content. The main tag should make it obvious where the actual lesson begins. When that is clear, the page is easier to navigate, test, redesign, and maintain. It also gives every template a predictable structure. If a developer opens the page months later, they can locate the primary content quickly without guessing from class names or visual layout alone in the editor. This keeps structure practical in production work.
Common Mistakes
- Using more than one visible
<main>element on a normal page. - Putting global navigation, logo, or footer content inside
<main>. - Using
<main>only because it seems like a good CSS wrapper. - Forgetting that
<main>should contain the page-specific content. - Replacing every container with
<main>instead of using one main region.
Can main be inside header?
No. The main element should not be placed inside header, nav, aside, article, or footer. It represents the primary content region of the document.
Can main contain article?
Yes. A main element commonly contains an article, especially on blog posts, tutorials, and documentation pages.
Does main improve SEO directly?
It is not a ranking shortcut, but it creates cleaner structure and helps search engines understand the primary content area more clearly.
Best Practices
- Use one visible
<main>element per page. - Place only the primary page-specific content inside it.
- Keep repeated header, navigation, sidebar, and footer content outside it.
- Use an
idon main when creating skip links. - Use article, section, headings, lists, tables, and forms inside main as needed.
Continue learning HTML in order
Follow the topic sequence with the previous and next lesson.