What is main tag in html

HtmlConceptBeginner · 3 min read

What is the <main> Tag in HTML and How to Use It

The <main> tag in HTML defines the main content of a webpage that is unique and central to the page. It helps browsers and assistive technologies understand the primary content area, improving accessibility and SEO.

⚙️

How It Works

The <main> tag acts like the heart of a webpage's content. Imagine a newspaper: the main article is what readers focus on, while ads and side notes are extra. The <main> tag marks this main article area in your webpage.

This tag helps browsers and screen readers quickly find the most important part of the page. It improves navigation for people using assistive devices and helps search engines understand what the page is about.

Only one <main> tag should be used per page, and it should not be inside other sections like <header>, <footer>, or <nav>. It usually contains the unique content that changes from page to page.

💻

Example

This example shows a simple webpage with a <main> tag containing the main content.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Tag Example</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#">Home</a> |
      <a href="#">About</a> |
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <h2>Welcome to the Main Content</h2>
    <p>This is the main part of the page where the unique content goes.</p>
  </main>

  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

Output

🎯

When to Use

Use the <main> tag to wrap the primary content of your webpage that is unique and central to that page. This helps users and search engines quickly find the important part.

For example, on a blog post page, the article text should be inside <main>. On a product page, the product details go inside <main>. Avoid putting navigation menus, headers, or footers inside it.

Using <main> improves accessibility by letting screen readers jump directly to the main content, saving time for users who rely on them.

✅

Key Points

The <main> tag marks the main unique content of a webpage.
Only one <main> tag should be used per page.
It should not be inside <header>, <footer>, or <nav> tags.
Helps improve accessibility and SEO by highlighting important content.
Use it to wrap the content that changes from page to page.

✅

Key Takeaways

The

tag defines the main unique content of a webpage.

Use only one

tag per page, outside headers and footers.

It improves accessibility by helping screen readers find key content.

It helps search engines understand the page's primary content.

Wrap your page’s main content inside

for better structure.