HTML <main> Tag – Main Content Area
📌 Introduction
The <main> tag is used to define the main content of a webpage.
It contains the content that is directly related to the page’s primary purpose.
👉 There should only be one <main> per page.
🧱 Syntax
<main>Content here</main>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Main Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<h2>Welcome</h2>
<p>This is the main content of the page.</p>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>
</html>
🖥️ Output Explanation
- The
<main>section contains the primary content - It is separate from header and footer
- Helps browsers and screen readers understand structure
🎯 What Goes Inside <main>?
Common elements:
- Articles
- Blog posts
- Page content
- Forms
- Key information
Example:
<main>
<h2>Courses</h2>
<p>Learn HTML step by step.</p>
</main>
🧠 Important Rule
👉 Only one <main> per page
❌ Wrong:
<main></main>
<main></main>
✔ Correct:
<main></main>
⚖️ <main> vs <div>
| Tag | Purpose |
|---|---|
<main> |
Main page content (semantic) |
<div> |
Generic container |
✔ Use <main> for real page content
❌ Don’t use it for layout blocks
🎯 Why <main> is Important
- Improves SEO structure
- Helps accessibility tools
- Clearly defines page purpose
- Used in modern HTML layouts
🚫 Common Mistakes
- Using multiple
<main>tags ❌ - Putting navigation or footer inside
<main>❌ - Using it just like a
<div>❌
🎨 Styling Example
<main style="padding:20px;">
<h2>Welcome</h2>
<p>Main content area</p>
</main>
🧪 Mini Exercise
Create a page with:
<header><main>containing:- A title
- A paragraph
<footer>Style the main section with padding and background color