[noiiyfdedvv]

There’s a little typo in the simple example:

    <main>
      <header> </header>
      <section> </section>
      <section> </section>
      <section> </section>
      <footer> </footer>
    </header>

Note closing header not main.

[fbdab103]

If we are going to add some notes...

I appreciate it if sites demoing their CSS embed the non-minimized version. I wanted to take a quick peek at what it looked like, but instead I have to go through a few additional hops to grab the source. Or at least just a clickable link directly to the unprocessed form.

[qingcharles]

I use the <article> tag for the main content of the page, and then <section> for related but extra content, such as the comments section, tags, etc.

[alberth]

Another thing, semantically - the HEADER and FOOTER should go before & after, respectively, the MAIN tag

[noiiyfdedvv]

I was curious so I checked. According to MDN:

> Permitted parents: Any element that accepts flow content. Note that a <header> element must not be a descendant of an <address>, <footer> or another <header> element

I think you can use a header more or less anywhere, and it is a header for content contained by its parent.

[eddd-ddde]

I think it is more related to whether your header and footer are actually the main content of your page, which may vary from page to page.

[noiiyfdedvv]

Good point. Apparently (MDN) there should only be 1 main on a page, and it should not include sidebars, generic headers/footers repeated on other pages, etc.

So, you might have a site-wide header, a main containing a content-specific header / content / footer, and then a site-wide footer.

Not sure how useful that would be, but interesting to me as a sometime web hacker.