HTML <main> tag is used to represent the main content of the <body> tag.
The <main> tag is written within <body> tag. It is used to accurately describe the primary content of a page.
The content of the main tag is directly related to the central topic of the document.
HTML <main> is a new tag and introduced in HTML5.
Points to remember:
Author should not include more than one <main> tag within a document.
The <main> element should not used as a child of an <article>, <aside>, <header>, <footer>, or <nav> element.
HTML main tag and its sub elements can be easily styled by CSS.
HTML main tag example
<main>
<h2>Apples</h1>
<p>The apple is a red color pomaceous fruit of the apple tree. It is a very famous saying about apple.
</br> "An apple in a day, keeps the Doctor away".</p>
<article>
<h3>Red Delicious</h3>
<p>These bright red apples are the most common found in many supermarkets.</p>
</article>
<article>
<h3>Granny Smith</h3>
<p>These juicy, green apples make a great filling for apple pies.</p>
</article>
</main>
Output:
Apples
The apple is a red color pomaceous fruit of the apple tree. It is a very famous saying about apple.
“An apple in a day, keeps the Doctor away”.
Red Delicious
These bright red apples are the most common found in many supermarkets.
Granny Smith
These juicy, green apples make a great filling for apple pies.
The <main> tag also supports global attributes and event attributes in HTML 5.
Supporting Browsers
Element | Chrome | IE | Firefox | Opera | Safari |
<main> | Yes | No | Yes | Yes | Yes |
Leave a Reply