HTML Tutorial

HTML <main> Tag

The <main> tag in HTML is used to represent the dominant content of the body of the document. This content is unique to the document and should not contain repeated content such as navigation links, sidebars, or footers.

What is the <main> Tag?

The <main> element is a semantic HTML element that represents the main content of a webpage. This content is central to the document and includes information that is unique to the document or page. It improves the structure and accessibility of the webpage, especially for screen readers and search engines.

Syntax

<main>
  
</main>
  

Using the <main> Tag

The <main> element should only be used for content that is unique to the page, such as articles, blog posts, or main information. You should avoid placing elements that are repeated across multiple pages (like headers, footers, or navigation links) inside the <main> tag.

Example

<main>
  <h1>Welcome to Our Blog!</h1>
  <p>Here is the latest post on web development trends.</p>
</main>
  

Importance of the <main> Tag

The <main> tag enhances accessibility, allowing screen readers to skip over repetitive content like headers, footers, and navigation, and directly access the main content. This makes it easier for users with disabilities to
navigate your page. It also helps search engines better understand the structure of your webpage, which may improve your website’s SEO.

When to Use the <main> Tag?

The <main> tag should be used only once per document and it should contain the content that is unique to that specific page. Avoid using it for content that appears on multiple pages, such as site navigation or footer sections.

Example of Correct Use:

<main>
  <article>
    <h2>The Evolution of Web Design</h2>
    <p>Web design has evolved over the years with the introduction of new technologies and design principles. Let’s explore some key milestones in web design history.</p>
  </article>
</main>
  

Best Practices for Using the <main> Tag

Here are some best practices to follow when using the <main> tag:

• Place unique content inside: Use the <main> tag for content that is unique to the current page.
• Don't nest other sections: Avoid nesting elements like <header>, <footer>, or <nav> inside the <main> tag.
• Only one <main> tag per page: There should only be one <main> tag per document. It should not be used for navigation or repeated content.

Conclusion

The <main> tag is an important HTML5 semantic element that enhances the accessibility and structure of a webpage. By using the <main> tag to wrap the central content of a page, you provide better navigation for screen readers, improve SEO, and ensure your page is easier to understand and interact with for all users.