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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...