4

I would like to create an app using semantic html. The app will have header, navigation, main area, footer, and side bar.

The app uses react, so there is an index.js and index.html. This is where react renders an element into the root DOM node.

index.js

 render(<App />, document.getElementById('root'))

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Title</title>
  </head>
  <body>
    //<div id="root"></div>
    // <main id="root"></main>
    // <section id="root"></section>
  </body>
</html>

I expect the app to produce something similar to:

<some root node>
    <header>
    <nav>
    <main>
    <aside>
    <footer>

Since React requires a root node, what element type should that be (what is the most semantically correct)? The root node is inside index.html, therefore a fragment will not solve the problem. I've commented out a few ideas inside index.html which are div, main, and section.

Improve this question
4
  • On their website they use <div>s, so I'd say go with that. Commented Aug 6, 2019 at 20:11
  • Maybe <main></main> ? w3schools.com/tags/tag_main.asp Commented Aug 6, 2019 at 20:12
  • 3
    @Unixmonkey main should ideally not contain repeated content like side bars, navigations, etc... i would stick with the goold old <div /> as root node Commented Aug 6, 2019 at 20:13
  • @Turtlefight Agree. Thank you! Commented Aug 7, 2019 at 15:29

4 Answers 4

Reset to default
7

<main> is supposed to relate to the dominant part of the content. If you wish to have navigation, header and/or sidebar and things like that it seems more apropriate to use a div for the App and use the <main> tag for the main content on the page.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Great answer! Thank you.
3

It doesn't really make a difference but the official documentation uses a <div>

Improve this answer

Comments

0

You can aldo uso document.bodyif you prefer. It does not have a particular relevance if you have only a SPA in your page.

Improve this answer

Comments

0

You can use main tag for the root and after that use section tag for the respective sections.

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.