htmlsemantic-markup

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)

Solution

  • 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.