HTML main Tag

HTML <main> element is utilized to display the primary content of the <body> element.

The <main> tag is enclosed within the <body> tag. Its purpose is to provide a precise description of the main content on a webpage.

The material within the primary tag is closely connected to the main subject matter of the file.

HTML <main> represents a recent addition to HTML and was first introduced in HTML5.

Points to remember:

Authors are advised to limit the use of multiple <main> tags in a single 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

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 crimson-hued pomaceous fruit that grows on the apple tree. There is a well-known adage associated with apples: "Eating an apple a day keeps the doctor away."

Red Delicious

These vibrant red apples are frequently seen in numerous grocery stores.

Granny Smith

These ripe, verdant apples are an excellent choice for filling in apple pies.

The <main> element in HTML 5 also accommodates global attributes and event attributes.

Supporting Browsers

Element	Chrome	IE	Firefox	Opera	Safari
`<main>`	Yes	No	Yes	Yes	Yes