Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ksharma20 opened this issue Jun 1, 2023 · 3 comments
Open

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

ksharma20 opened this issue Jun 1, 2023 · 3 comments

Comments

@ksharma20
Copy link

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>

image

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.
@ksharma20
Copy link
Author

I would love to work on this!
Please assign this issue to me!

@vinfinity7
Copy link

But what is the necessity? It poses no problem .

@rothsandro
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants