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.
Activity
ksharma20 commentedon Jun 1, 2023
I would love to work on this!
Please assign this issue to me!
vinfinity7 commentedon Jun 1, 2023
But what is the necessity? It poses no problem .
rothsandro commentedon Jun 4, 2023
The
main
element should only be used for the actual main content of the page, not including any repeating elements like header, navigation and footer. One of your components should render themain
element and header/nav/... should be rendered outside.