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 |
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>
Output on the browser
Most used social media in India
Facebook, Twitter, and Instagram are the most used social media platforms in India.
Facebook is a social networking site that allows users to connect and share in different ways.
Twitter is specially designed to broadcast short posts called tweets.
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.
