Tag main

The main tag is a semantic HTML5 element that defines the core content of your web page. This is the content that is directly related to the central topic — and it’s vital for accessibility, SEO, and clean structure.

📌 What Is the <main> Tag?

The <main> element is used to encapsulate the main content of the page. It should appear only once in a document and not be nested inside elements like <header>, <nav>, or <footer>.

📷 Visual Example 1: Basic Structure

<body>
  <header> ... </header>

  <main>
    <h1>Welcome to My Blog</h1>
    <p>This is where the main content lives.</p>
  </main>

  <footer> ... </footer>
</body>

🔍 In the example above:

  • <header> and <footer> wrap site-wide navigation and info.
  • <main> wraps the unique content of the page.

🧩 Structure Diagram

<body>
├── <header>        ← Top navigation, logo, etc.
├── <main>          ← Primary content of this specific page
│   ├── <h1>
│   └── <p>
└── <footer>        ← Copyright, links

✅ Only one <main> per page
❌ Do not nest it inside <header>, <nav>, etc.

🎯 Why Use <main>?

BenefitDescription
✅ AccessibilityScreen readers can skip directly to it
✅ SEOHelps search engines locate main content
✅ Clean MarkupEasier to maintain and understand

📷 Visual Example 2: Full Page Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
</head>
<body>

  <header>
    <h1>John Doe</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/projects">Projects</a>
    </nav>
  </header>

  <main>
    <h2>Featured Projects</h2>
    <article>
      <h3>Project One</h3>
      <p>A web application built with HTML, CSS, and JS.</p>
    </article>
    <article>
      <h3>Project Two</h3>
      <p>My open-source GitHub tool for developers.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2025 John Doe</p>
  </footer>

</body>
</html>

📌 In this example:

  • The <main> tag contains all unique content for the “Projects” page.
  • Each project is inside an <article>, also a semantic element.

🚫 Common Mistakes

❌ Mistake✅ Correct Use
Placing <main> inside <header> or <nav>Place <main> directly inside <body>
Using multiple <main> tags on one pageUse only one per document
Using <main> for sidebar or repeated contentOnly for the primary content

✅ Conclusion

The <main> tag is small but powerful. It brings structure, clarity, and accessibility to your pages. Whether you’re creating a personal blog or a corporate site, wrapping your central content in a <main> tag is a smart and modern choice.