Open
Description
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.