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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions