HTML Main Tag

Introduction

The HTML main tag (<main>) is used to define the main content of a document. The main content is the content that is unique to a specific document, excluding content that is repeated across a set of documents such as headers, footers, navigation, and sidebars.

Syntax

The basic syntax for creating the main tag in HTML is as follows:

Copy><main> 
    <!-- Main content goes here --> 
</main> 

Purpose

The main tag is used to identify the main content of a page. This allows assistive technologies, such as screen readers, to skip over repeated content and quickly get to the unique content of a page. It also helps search engines understand the most important content on a page.

Example

Here's an example of how to use the main tag in HTML:

Copy<header> 
    <nav> 
        <ul> 
            <li><a href="#">Home</a></li> 
            <li><a href="#">About</a></li> 
            <li><a href="#">Contact</a></li> 
        </ul> 
    </nav> 
    <h1>My Website</h1> 
</header> 
<main> 
    <h2>Welcome to My Website</h2> 
    <p>This is the main content of my website.</p> 
</main> 
<footer> 
    <p>Copyright © 2022 My Website</p> 
</footer> 

Limitations

• There should only be one main tag per page.
• The main tag should not be a descendant of an article, aside, footer, header, or nav element.
• The main tag should contain the main content of the document, excluding any repeated content such as headers, footers, navigation, and sidebars.

Styling the Main Tag

You can use CSS to style the main tag, such as setting the background color, adding padding or margins, and changing the font. Here's an example:

Copymain { 
    background-color: #fff; 
    padding: 20px; 
} 

Conclusion

The HTML main tag is used to define the main content of a document. It is important for accessibility and search engine optimization to correctly identify the main content of a page. The main tag should only be used once per page and should not contain any repeated content. The main tag can be styled using CSS to create a visually appealing layout for your website.