CODEWITHSUNDEEP
htmlsemantic-markup
neoDev
neoDev

Reputation: 3049

can <main> element be nested inside a div or must be a direct descendant of body?

I am reading the docs but I still don't understand if the <main> element can be nested inside some other element e.g.

<div>
    <div>
        <main>...</main>
    </div>
</div>

or it must be a direct descendant of the body e.g.

<body>
    <main>...</main>
</body>

All the examples I've seen were showing the main as direct descendant of body...

So I am a bit confused: is it correct to put main inside some other element than body? (of course using it just one time)

Upvotes: 9

Views: 6654

Answers (2)

Annappa Gowda
Annappa Gowda

Reputation: 11

Generally the main tag must be one and unique to the entire Web Application or the Custom HTML Page. Technically it it okay to use the main tag inside the div tag but it not the correct way of maintaining the semantic passion in the code. in the React or Next JS Application it is better to wrap the root entry point with main and then we can use the other semantic tag like section , header, nav, figure inside the App. Even inside the div also we can use the other semantic tags excepts main.

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

Per the spec

4.4.13. The main element

Categories:

  • Flow content.
  • Palpable content.

Contexts in which this element can be used:

Where flow content is expected, but with no <article>, <aside>, <footer>, <header> or <nav> element ancestors.

As the <body> and <div> elements may contain flow content, you are safe to nest them.

Upvotes: 15

Related Questions