You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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 the main element and header/nav/... should be rendered outside.
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 anid='root'
.Additional context
Advantages:
Disadvantages:
The text was updated successfully, but these errors were encountered: