htmlcsssemantic-ui

Main (html tag) containing header

I'm confusing. I read diferents opinions about main. The first one says that main (as it's the principal section) could contain header and footer as direct children.

<main>
    <header></header>
    <section>for the content</section> 
</main>

Others says that main can't contain header as direct children, instead use article or section as parent. So the result would be:

<main>
    <article>
        <header></header>
        <section>for the content</section>
    </article>
</main>

Currently I have this layout, but I'm confused if It's necessary to add an article or a section to wrapp the header and the content:

enter image description here

Solution

  • Ok after more research it's seems to be ok to use main with header as a direct children. enter image description here

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

    If I understand this, main could be parent of any flow content. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content