HTML <main> tag

The <main> tag is used to define the main content of a webpage. By default, using this tag does not render any visual style on the page. It is essential for modern HTML structure.

Type: Block Element

Basic syntax of <main> tag

<body>
 <header>..</header>
 <nav>..</nav>

<main>
  Main content
</main>

<footer>..</footer>
</body>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<main> Yes Yes Yes Yes Yes
Only one <main> element must exist in a webpage.

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<main>

  <h1>Most used social media in India</h1>
  <p>Facebook, Twitter, and Instagram are the most used social media platforms in India.</p>

  <article>
    <h2>Facebook</h2>
    <p>Facebook is a social networking site that allows users to connect and share in different ways.</p>
  </article>

  <article>
    <h2>Twitter</h2>
    <p>Twitter is specially designed to broadcast short posts called tweets.</p>
  </article>

  <article>
    <h2>Instagram</h2>
    <p>Instagram is a social networking site mainly based on sharing photos and videos.</p>
  </article>

</main>

</body>
</html>
Run The code »

Output on the browser

Most used social media in India

Facebook, Twitter, and Instagram are the most used social media platforms in India.

Facebook

Facebook is a social networking site that allows users to connect and share in different ways.

Twitter

Twitter is specially designed to broadcast short posts called tweets.

Instagram

Instagram is a social networking site mainly based on sharing photos and videos.

More reference

The content of the <main> element should be unique to a page. It should not be repeated across all pages. For instance, on every website, navigation bars, primary sidebars, and footer elements are repeated on all pages of that website. It can't be inside such repeated elements.

It is helpful for the screen readers skipping to main content. Also, it helps in displaying at the top list on search engine result.