Wireframing: From design to website video

This video is found in module 8, section 2 of the front-end engineer career path.

At around 6:20 the instructor places the <main> tag inside the <header> tag. It is my understanding that main should never be placed inside header, and a better practice would be to use a <div> tag with the class ‘main banner’ instead of <main class = "banner" >

From w3:
"The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element."

I would love to know others opinions on this, and possibly see a correction in this video. Conflicting information can make it difficult to learn.

HTML pretty much lets you do as you please, but there might be conventions to follow in order to pass W3C validation. I’m not entirely sure what they are though.

This is the structure that I personally use:

<body>
  <header>
   <nav></nav>
  <header>
  <main>
    <section>
      <article></article> 
    </section>
  </main>
  <footer></footer>
</body>