Use <main> tag </main> instead of <div id="root"></div> !! #13204

Is your proposal related to a problem?

I'm always frustrated when I have to change index.html manually to replace
<div id="root"></div> to <main id="root"></main> OR Better <main></main>

Describe the solution you'd like

Let's just use <main id="root"></main> instead of <div id="root"></div>.
As it tells the developer & search engines that this is the main content (that is, our React App).

Describe alternatives you've considered

We can also replace it with <main></main> and Make our App component manipulate the <main> tag instead of selecting an id='root'.

Additional context

Advantages:

• Better document readability for the developer
• Screenreader landmarks and inferred roles.
• Improved Semantics (through differentiation from
  elements).
• Element-level selector distinction in CSS (low specificity).

Disadvantages:

• Older browsers (such as IE8 and below) will need JavaScript-based polyfills and basic CSS to make the elements behave as intended.