<h2>CatPhotoApp</h2>
<main>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere.
</p>
<p>
Kitty ipsum stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
</main>
Your browser information:
User Agent is: Mozilla/5.0 (X11; CrOS x86_64 12871.76.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.103 Safari/537.36.
Just like its name suggests, it is a container for the primary (main) content of your page.
According to MDN
The content of a <main> element should be unique to the document. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms shouldn’t be included unless the search form is the main function of the page.
What the above statement means is that your web site for example can have multiple web pages e.g. About page, Services Page, Contact Page e.t.c. The web pages can have different information and are placed in different HTML files. However information such as footer, copyright information must be in each of the web pages (repeated). Information unique to the document can be placed in main tag while information repeated across the different documents must not.
Does the page render if you omit the main tag from your HTML?
Yes. Your page will render fine even if you don’t include it in your HTML.
Why then should we bother having it in our HTML documents?
One of the reasons is Accessibility. To enable those using Assistive technologies to easily use your website. It is therefore very important to have it in our web pages because you are building a website which is accessible to everyone e.g. those who are visually impaired accessing your website using screen readers should be able to.
You can read more about Web Accessibility Here and how to use main tag in the link above.
