But putting the `<header>` and `<footer>` inside the `<main>` element is not semantically correct. If it would be, you wouldn't need `<main>`. That's exactly why there's a very basic limit to classless CSS frameworks.
That's incorrect. You can have a header and footer for each sectioning element/sectioning root (eg article) in your doc [1] (but you can't have a main element in header or footer content [2]).
In general, I don't think "HTML semantics" are really as stringent as assumed by some commenters. After all, HTML was just intended as a vocabulary for casual academic publishing, but is of course abused for text that could be much, much more simply and adequately described using other, more targeted or customized SGML vocabularies rather than HTML.
I was referring to the global page header/footer you were talking about, should've made that more clear. Obviously you are allowed to use multiple `<header>` and `<footer>` elements on the same page.
While it is true that HTML semantics aren't as stringent as often assumed, there certainly are more or less universally accepted best practices. They depend on the complexity of the site itself. (It may also be unclear what a "page header" actually is. It could contain your logo and navigation, but the `<h1>` should rather be in the `<main>` element.)
So this is what my most basic structure inside the `<body>` would look like:
<header></header>
<main></main>
<footer></footer>
If you're doing this with the global page header/footer, there would be no reason to use `<main>` at all:
Also, I can't really reproduce your initial issue regarding the flexibility of page spacing. You are pretty limited when using classless CSS, but where's the problem using the body selector for that?
