Learn HTML – Part 26 – main Tag – Main Content Section

The HTML main tag is used to define the primary content of a webpage.

This content should be unique to the page and directly related to the main topic of the document.

What is the main Tag?

The main tag is a semantic HTML element introduced in HTML5.

It represents the central content of the webpage that is not repeated across multiple pages such as navigation bars, sidebars, or footers.

Basic Syntax

<main>
   <h1>Welcome to Our Website</h1>
   <p>This is the main content of the page.</p>
</main>

Example – Main Content Area

<header>
   <h1>WPDeveloperTips</h1>
</header>

<nav>
   <a href="#">Home</a>
   <a href="#">Tutorials</a>
</nav>

<main>
   <h2>Learn HTML</h2>
   <p>HTML is the foundation of web development.</p>
</main>

<footer>
   <p>© 2026 WPDeveloperTips</p>
</footer>

Important Rules for the main Tag

• There should be only one main element per webpage
• The main element should not be inside header, footer, nav, or article
• It should contain the primary content of the page

Why Use the main Tag?

• Improves semantic HTML structure
• Helps screen readers identify main content
• Improves accessibility
• Helps search engines understand page structure

The main tag should contain the most important content of the webpage.

Common Mistakes Beginners Make

• Using multiple main elements in one page
• Placing navigation or footer content inside the main element
• Using it only for styling instead of structure

Conclusion

The HTML main tag defines the primary content area of a webpage.

It improves semantic structure and helps both users and search engines understand the main purpose of the page.

What’s Next?

Now that you understand the main tag, the next step is learning how these semantic elements work together to create a complete webpage layout.

Next: Learn HTML – Part 27 – Building a Complete HTML Page Layout →

Series: Learn HTML Series