Semantic implementation of the structure of a web page with header, main, and footer I'm new to web development, and currently learning the basics of HTML and CSS. Many web pages follow the structural pattern of header, main, and footer; so I figured it'd be a good idea to try and implement this structure to see how things are carved.



body {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  margin: 0;
  min-height: 100vh;
}

header,
footer {
  background-color: dodgerblue;
  color: white;
  text-align: center;
}

main {
  background-color: snow;
  flex: 1;
  padding: 1rem;
}

footer {
  margin-top: auto;
}
&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;link rel="stylesheet" href="main.css"&gt;
  &lt;meta charset="UTF-8"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;header&gt;
    &lt;h1&gt;Header&lt;/h1&gt;
  &lt;/header&gt;

  &lt;main&gt;
    &lt;h2&gt;Main content&lt;/h2&gt;
  &lt;/main&gt;

  &lt;footer&gt;
    &lt;h3&gt;Footer&lt;/h3&gt;
  &lt;/footer&gt;
&lt;/body&gt;

&lt;/html&gt;




I'm looking for all kinds of feedback, from style, to anti-patterns, ways to do things more concisely, and whatever other observation you can find useful. I do have some specific questions:


Are the semantic HTML elements used correctly? There's no need for an article element inside the main element, right?
In the CSS I selected both header and footer for stuff that they have in common, is this good practice? Or should I keep a single header and a single footer selectors, separately? Could be more maintainable that way?
Is this normally handled using Flexbox? Or is Grid display a better tool for this?
What things would you do differently?
I myself am also a beginner in the world of web development (So any comments about my answer are more than welcome!)
But maybe my tips can still be useful in one way or another. ;-}
The first thing that came to mind is your header and footer element question about grouping them together that way in CSS because they have things in common...My short answer is no, I would change my HTML element for these, or better said, add a class or id attribute, and group it together this way.
Example:
 &lt;header class = &quot;topAndBottom&quot;&gt;.....&lt;/header&gt;
         &lt;footer class = &quot;topAndBottom&quot;&gt;.....&lt;/footer&gt;

CSS example:
 .header, topAndBottom {
.......
}

I personally prefer the class attribute over the id, because you can use it more often in your HTML, the id attribute is once or maybe twice acceptable in your HTML(Not my rules)
Or you can only style your &lt;h1&gt; inside your header and the &lt;h3&gt; inside your footer, I would recommend this if it is mainly text that you want to style.
And one tiny comment about the order in your CSS, and this is purely personal, but maintain the order from your HTML in your CSS for better reading, especially when your code will be more advanced and complex.
Good luck with your learning for web development! I started also not long ago and I am addicted!