Organizing a page <header>, <footer>, <article>, <section>, etc...

[DarkxPunk]

Hey there,

I am having a bit of an argument with myself on how best to organize a general page, in this specific instance for a blog. Reading online you get many different perspectives on how to organize the page, however generally you get something like this:

<header>
  <nav>
  </nav>
</header>
<main>
  <article>
    <h2>Heading</h2>
    <p>Date: YY/MM/DD</p>
    <p>Author: Name</p>
    <p>Article Content</p>
  </article>
</main>
<aside>
</aside>
<footer>
</footer>

The article block would typically repeat for how many number of articles are on the page. Looking further online, reading the spec and understanding a big more how article, sections, and the like work I have come across other layouts like such:

<header>
  <nav>
  </nav>
</header>
<main>
  <section>
    <article>
      <header>
        <h2>Heading</h2>
        <p>Date: YY/MM/DD</p>
        <p>Author: Name</p>
      </header>
      <p>Article Content</p>
      <footer>
        <p>Copyright Info</p>
      </footer>
    </article>
  </section>
</main>
<aside>
</aside>
<footer>
</footer>

This can even get further complicated with the introduction of comments, article navigation, etc.

I am curious to hear from you all what is your preferred way to handle this sort of organization?

Cant wait to hear back!
Thanks!

[Ingolme]

If the only region on the page that has content is the list of articles itself, I would say the <section> tag is not needed as a direct child of <main>. It's best to give <article> its own <header> to distinguish the article metadata from the article body. If your article is long and has many <h2> - <h6>  tags, it would make sense to separate the article itself into sections, one section per sub-heading element as in the following example:
 

<article>
  <header>
    <h2>Title</h2>
    ... Metadata ...
  </header>
  <section>
    <h3>Section 1</h3>
    <p>Content</p>
  </section>
  <section>
    <h3>Section 2</h3>
    <p>Content</p>
  </section>
</article>

Comment sections could be in the <footer> section of an article, but it could also be placed outside of the <article> element because the content of the comments may potentially not be relevant to the article itself. It would make sense to wrap the comment section in its own <section> tag if it's outside of the article.

The truth, though, is that it's not worth overthinking these things because it does not have a major impact on your website. Do your best to make it semantically correct, but don't worry too much about it because there isn't one single correct answer.