The main tag or <main> tag in HTML is used to represent the main content of the webpage. And the content of the main tag should be unique.
So far we never had any tags in HTML that represents the main area of the HTML page. However, with Semantic tags, we got the Main tag that represents the main area of the HTML page.
Let us understand main tag with the below example.
<html>
<body>
<header>
<h1>My Header</h1>
</header>
<main>
<p>This is the main content</p>
</main>
</body>
</html>
So, if you look at the above code. The main tag represents the main area of the HTML page.
<main> <p>This is the main content</p> </main>
Usually the main tag should not contain footer contents like copyright info, sidebar or the . The content of the main tag should be unique.
And most importantly there should not be more than one main tag in the HTML page.
However, we can have <article> tag or <section> tag in the main tag.
<html>
<body>
<main>
<article>
<header>
<h1>First Header for article</h1>
</header>
<h1>First Paragraph</h1>
<p>This is the first paragraph</p>
</article>
<article>
<header>
<h1>Second Header for article</h1>
</header>
<h1>Second Paragraph</h1>
<p>This is the second paragraph</p>
</article>
</main>
</body>
</html>
So, if you look the above code, we have two article tags within the main tag.
The first <header> tag is within the <article> tag. And the second <header> tag is also within the <article> tag.
<main> <article> <header> <h1>First Header for article</h1> </header> <h1>First Paragraph</h1> <p>This is the first paragraph</p> </article> <article> <header> <h1>Second Header for article</h1> </header> <h1>Second Paragraph</h1> <p>This is the second paragraph</p> </article> </main>