Skip to content

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

Open
@ksharma20

Description

@ksharma20

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.

Activity

ksharma20

ksharma20 commented on Jun 1, 2023

@ksharma20
Author

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

vinfinity7

vinfinity7 commented on Jun 1, 2023

@vinfinity7

But what is the necessity? It poses no problem .

rothsandro

rothsandro commented on Jun 4, 2023

@rothsandro

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @rothsandro@ksharma20@vinfinity7

        Issue actions

          Use <main> tag </main> instead of <div id="root"></div> !! · Issue #13204 · facebook/create-react-app