Table of contents

HTML <main> Tag

What is HTML <main> Tag?

The HTML main tag is used to define the main content of a webpage. It represents the central topic or the primary content that is directly related to the purpose of the page. The content inside the main tag is unique to that page and excludes elements like headers, footers, navigation menus, and sidebars.

This tag is important for both accessibility and SEO. It helps browsers, search engines, and assistive technologies identify the primary section of the page. The main tag improves the document structure, allowing search engines to better understand what the page is about.

Syntax of the HTML <main> Tag

plaintext
<main>
  Main content of the webpage goes here.
</main>

The main tag begins with the opening tag <main> and ends with the closing tag </main>. Only one main tag should be used per page to maintain semantic clarity.

Examples of HTML <main> Tag

Example 1: Basic HTML Main Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Welcome to Scholar247</title>
</head>
<body>

  <header>
    <h1>Scholar247 Learning Hub</h1>
  </header>

  <main>
    <h2>About Scholar247</h2>
    <p>Scholar247 provides free and simple tutorials for beginners learning HTML and web development.</p>
  </main>

  <footer>
    <p>&copy; 2025 Scholar247. All rights reserved.</p>
  </footer>

</body>
</html>

In this example, the main tag defines the primary content of the page, the description about Scholar247. It excludes the header and footer, focusing only on the main topic.

Example 2: SEO Optimized HTML Main Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Learn HTML Tags for Beginners | Scholar247</title>
  <meta name="description" content="A complete beginner guide to HTML main tag with syntax, examples, and SEO benefits.">
</head>
<body>

  <header>
    <nav>
      <a href="index.html">Home</a> |
      <a href="tutorials.html">Tutorials</a>
    </nav>
  </header>

  <main>
    <h2>HTML Main Tag Tutorial</h2>
    <p>The HTML main tag helps structure the key part of your web page content for better SEO and accessibility. Scholar247 teaches you how to use it effectively.</p>
  </main>

  <footer>
    <p>Contact Scholar247 for more tutorials.</p>
  </footer>

</body>
</html>

This example uses an SEO-friendly title and description along with the main tag to define meaningful, keyword-rich content. Search engines can easily identify the main topic of the HTML Main Tag Tutorial.

Attributes of the HTML <main> Tag

The main tag does not support any specific attributes.
However, global attributes such as id, class, style, and lang can be used for styling, scripting, or identification purposes.

Best Practices for HTML <main> Tag

• Use only one main tag per page for proper semantic structure.
• Do not place the main tag inside header, footer, article, or section elements.
• Keep only the core page content inside the main tag.
• Combine it with proper headings (h1, h2) for clear hierarchy.
• Use global attributes like id or class to style or reference the main section if needed.
• Ensure the main tag content aligns with your page’s primary purpose for SEO.

FAQs About HTML <main> Tag

Q1: What is the purpose of the HTML main tag?

The HTML main tag is used to identify the main content of a web page that is unique to that page and directly related to its central topic.

Q2: Can I use multiple main tags in one page?

No, only one main tag should be used per HTML document to maintain clear structure and accessibility.

Q3: Does the main tag improve SEO?

Yes. It helps search engines understand which part of your page contains the most relevant content, improving indexing and ranking.

Q4: Where should the main tag be placed?

It should be placed inside the body tag but outside elements like header, footer, and nav.

Q5: Can I style the main tag with CSS?

Yes. The main tag can be styled using CSS properties by applying a class, id, or directly targeting the main selector.

HTML

Related Articles