3 ms·

Not putting your page header and footer inside the <main> element is a giant pain in the ass. Both ways are semantically correct and accessible, but putting the

Not putting your page header and footer inside the <main> element is a giant pain in the ass. Both ways are semantically correct and accessible, but putting them inside the main gives you more flexibility to control your page margins/padding for various display sizes and lets you set up a grid for the whole page.

zichy 4y ago
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.
- tannhaeuser 4y ago
  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. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fo... [2]: http://sgmljs.net/docs/w3c-html52-dtd.html http://sgmljs.net/docs/w3c-html52-dtd.html
  - zichy 4y ago
    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: <main> <header></header> <footer></footer> </main> 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?
clairity 4y ago
you can instead use the <html> and/or <body> tags as extra containers for that.

zichy 4y ago

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.

tannhaeuser 4y ago
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. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fo... [2]: http://sgmljs.net/docs/w3c-html52-dtd.html http://sgmljs.net/docs/w3c-html52-dtd.html
- zichy 4y ago
  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: <main> <header></header> <footer></footer> </main> 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?

clairity 4y ago

you can instead use the <html> and/or <body> tags as extra containers for that.