Jump to content
DarkxPunk

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

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×