HTML <main> Tag

Beginner
⏱️ 6 min read
📚 Updated: Jun 2026
🎯 3 Examples
Semantic HTML5
HTML main tag tutorial — semantic primary content landmark for web pages
Overview

What You’ll Learn

By the end of this tutorial, you’ll structure pages with <main> so primary content is semantic, accessible, and SEO-friendly.

01

Core Syntax

Wrap unique page content in <main> tags.

02

One Per Page

Use a single visible main landmark per document.

03

Landmark Role

Help screen readers jump to primary content.

04

Page Layout

Place main between header, nav, aside, and footer.

05

main vs div

Choose semantic markup over generic divs.

06

Skip Links

Target id="main-content" for accessibility.

Fundamentals

What Is the <main> Tag?

The main element (<main>) is a semantic HTML5 landmark that wraps the primary content of a document — the central topic or application functionality. It excludes content repeated across pages such as site headers, navigation bars, footers, and sidebars.

💡
One main, primary content only

Each page should have exactly one visible <main> element. Do not put site-wide navigation, logos, or copyright footers inside it — those belong in <header>, <nav>, and <footer>.

Using <main> improves accessibility by giving assistive technology a clear landmark, and helps search engines understand which content is unique to the page.

Foundation

📝 Syntax

Wrap the unique primary content between opening and closing <main> tags:

syntax.html
<main>
  <!-- Your main content goes here -->
</main>

Syntax Rules

  • Only one visible <main> per HTML document.
  • Must not be nested inside article, aside, footer, header, or nav.
  • Do not nest <main> inside another <main>.
  • Place as a child of <body> (directly or indirectly).
Cheat Sheet

⚡ Quick Reference

PatternCode SnippetNotes
Basic main<main>...</main>Primary content wrapper
Skip link target<main id="main-content">For “Skip to content” links
CSS hookclass="primary-content"Style the main area
Inside body<body><main>...</main></body>Correct placement
Exclude navNav outside mainSite nav is not main content
Count limitOne visible mainNo nested mains
Comparison

⚖️ <main> vs <div>

Feature<main><div>
SemanticsPrimary content landmarkGeneric container
AccessibilityAnnounced by screen readersNo landmark role
Per pageOne visible elementUnlimited
SEOSignals primary contentNeutral
Use today?Yes — preferredOnly when no semantic tag fits
Comparison

⚖️ <main> vs <article>

ElementScopeBest for
<main>One per page — all primary contentPage-level landmark
<article>Many per page allowedSelf-contained posts, cards, widgets
Togethermain contains article elementsBlog feed inside main
Nesting rulemain must not be inside articlearticle can be inside main
Reference

🧰 Attributes

The <main> element has no unique attributes — only global attributes apply:

id Global

Unique identifier for skip links and in-page anchors. Common value: main-content.

id="main-content"
class Global

CSS hook for layout and styling the primary content area.

class="primary-content"
tabindex A11y

Use tabindex="-1" so main receives focus when a skip link is activated.

tabindex="-1"
attributes.html
<main id="main-content" class="primary-content" tabindex="-1">
  <!-- Primary page content -->
</main>
Hands-On

Examples Gallery

Basic main wrapper, welcome content, and a full semantic page layout with header, nav, aside, and footer.

Live Preview

Primary content highlighted inside a semantic main landmark:

Article Title

This is the unique primary content of the page.

main with id and class

Add id for skip links and class for CSS styling.

main-attributes.html
<main id="main-content" class="primary-content">
  <p>This is the main content area of the page.</p>
</main>
Try It Yourself

📚 Common Use Cases

Use <main> on every page to wrap blog posts, product details, dashboard views, documentation content, and any unique primary content — always excluding site chrome like global nav and footers.

Centralizing Primary Content

Wrap headings and body copy that represent the page’s central topic.

welcome-main.html
<main>
  <h1>Welcome to Our Website</h1>
  <p>Explore our latest products and services.</p>
</main>
Try It Yourself

Semantic Page Layout

Place <main> between site chrome and beside <aside> for related content.

page-layout.html
<header>Site Header</header>
<nav>...</nav>
<main>
  <h1>Article Title</h1>
  <p>Primary content here.</p>
</main>
<aside>Related links</aside>
<footer>Copyright</footer>
Try It Yourself
Design

Styling <main> with CSS

Style the primary content area with layout, spacing, and max-width constraints:

max-width Readable line length
margin: auto Center content
padding Inner spacing
min-height Fill viewport
main-layout.css
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  min-height: 60vh;
}

main h1 {
  margin-bottom: 1rem;
  line-height: 1.3;
}

Styled main content area

Product Overview

Centered, padded primary content with a comfortable reading width.

A11y

♿ Accessibility

The <main> landmark is essential for accessible page structure:

  • Landmark navigation — Screen readers list main as a landmark so users can jump directly to primary content.
  • Skip links — Add <a href="#main-content">Skip to main content</a> and matching id on main.
  • Focus management — Use tabindex="-1" on main so it receives focus after a skip link is activated.
  • Heading hierarchy — Start main content with an appropriate <h1> for a logical document outline.

🧠 How <main> Works

1

Author structures the page

Header, nav, and footer wrap repeated site chrome outside main.

Markup
2

Unique content goes in main

Articles, product details, and page-specific content live inside <main>.

Structure
3

Browser exposes landmark

Assistive technology maps main to the primary content region.

Accessibility
=

Clear, navigable pages

Users and search engines instantly recognize where primary content begins.

Compatibility

Universal Browser Support

The <main> element is an HTML5 semantic landmark with full support in all modern browsers and Internet Explorer 11+.

✓ Baseline · HTML5 Landmark

Semantic primary content everywhere

From IE11 to the latest mobile browsers — main is a standard landmark for accessible, structured pages.

100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 11+ · Landmark support
Full support
Opera All modern versions
Full support
<main> tag 100% supported

Bottom line: Use <main> on every page for semantic, accessible primary content in all production environments today.

Wrap Up

Conclusion

The <main> tag is a cornerstone of semantic HTML5. It identifies the unique primary content of each page, improves accessibility landmarks, and helps both users and search engines focus on what matters most.

Use exactly one visible main per page, keep site chrome outside it, and pair it with skip links and proper heading hierarchy for the best results.

View Examples Gallery Try page layout
Pro Tips

💡 Best Practices

✅ Do

  • Use one visible <main> per page
  • Put unique page content inside main
  • Add id="main-content" for skip links
  • Keep nav, header, and footer outside main

❌ Don’t

  • Nest main inside header, nav, or footer
  • Use multiple visible main elements
  • Put site-wide navigation inside main
  • Replace main with a generic div
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <main>

Bookmark these before you ship — they’ll keep your page structure semantic and accessible.

6
Core concepts
🌐 01

Primary Content

main wraps the page’s central topic.

Foundation
📍 02

Landmark

Screen readers navigate to main directly.

A11y
🔢 03

One Per Page

Single visible main element only.

Rule
⚖️ 04

Not a div

Semantic meaning beats generic containers.

Comparison
📄 05

Contains article

Articles live inside main, not vice versa.

Structure
✓ 06

Universal Support

HTML5 landmark in all modern browsers.

Compatibility
🎯 You’re ready to build semantic page layouts
Review Quick Reference →

❓ Frequently Asked Questions

It wraps the primary, unique content of a page — excluding headers, footers, navigation, and sidebars.
One visible main per document. Nested or duplicate visible mains are invalid.
main is a semantic landmark for primary content. div is a generic container with no special meaning.
Site-wide navigation belongs in <nav> outside main. In-page table-of-contents nav may appear inside main when it serves that specific content.
As a child of <body>, not nested inside article, aside, footer, header, or nav.
Yes. Full support in all modern browsers and Internet Explorer 11+.

Practice Semantic Page Structure

Build a page with header, nav, main, aside, and footer in the interactive editor.

Try It Yourself →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML listing Tag HTML map Tag