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.

Sign up for GitHub

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

Jump to bottom

refactor: replace <div> with <main> as root. #18938

Closed
wants to merge 2 commits into from
Closed

refactor: replace <div> with <main> as root. #18938

wants to merge 2 commits into from

Conversation

ShayokhShorfuddin
Copy link

Description

I recently noticed that a <div> tag was being used as the root within the <body> tag. I researched a bit and I am confident that using <main> tag instead of <div> is better because it promotes semantic structure and better accessibility. In some cases, this can positively impact SEO in some cases.

@ShayokhShorfuddin
Update index.html
ae66bd1 
Instead of using <div> tag as the root, using <main> is slightly better in terms of semantics and accessibility.
@ShayokhShorfuddin
Update index.html
37a65eb 
Instead of using <div> tag as the root, using <main> is slightly better in terms of semantics and accessibility.
@ShayokhShorfuddin ShayokhShorfuddin changed the title Replacing <div> with <main> as root. refactor: Replacing <div> with <main> as root. Dec 10, 2024
@ShayokhShorfuddin ShayokhShorfuddin changed the title refactor: Replacing <div> with <main> as root. refactor: replacing <div> with <main> as root. Dec 10, 2024
@ShayokhShorfuddin ShayokhShorfuddin changed the title refactor: replacing <div> with <main> as root. refactor: replace <div> with <main> as root. Dec 10, 2024
@sapphi-red
Copy link
Member

I don't think this <div> should be a <main>.
Normally, you would render the headers and footers within React, and if you do so, the output will be

<main id="app">
  <header>header</header>
  <main>content</main>
  <footer>footer</footer>
</main>

This is not correct because the <main> should be unique. You'll need to replace the outer <main> with <div>. But then, it's same with the current template.

@sapphi-red sapphi-red closed this Dec 24, 2024
@ShayokhShorfuddin
Copy link
Author 

<main id="app">
  <header>header</header>
  <main>content</main>
  <footer>footer</footer>
</main>

This is not correct because the <main> should be unique. You'll need to replace the outer <main> with <div>. But then, it's same with the current template.

I see the point and totally agree with you. However, I still find wrapping all the components inside a div, a non-semantic tag.

Is it possible to target the <body> tag as the root? Basically like this -

<body id="root">
    <header>header</header>
    <main>content</main>
    <footer>footer</footer>
    
    ...
</body>

@sapphi-red
Copy link
Member

I still find wrapping all the components inside a div, a non-semantic tag.

The <div> here doesn't mean more than just a grouping. I think it is appropriate to use <div> here.

Is it possible to target the <body> tag as the root?

No, that should not be done.
facebook/create-react-app#1568 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ShayokhShorfuddin @sapphi-red