article devided over multiple sections

Question

I'm building a blog page. At the top we have a div which contains the header image, title, author and other meta. Underneath this section we have a sidebar and after that comes the content of the article.

Could someone tell me what's the best way to use <article>? Should I only encapsulate the content, or not use the tag at all?

Thank you

http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf — slashsharp, Oct 12 '15 at 18:31
@Syahrul: It's a convenient graph, but I'm not sure if it applies to this specific situation, or does it ??? — JMRC, Oct 12 '15 at 18:49
It does applies to what you are wondering? In case you missed the url on the chart, http://html5doctor.com/outlines/ — slashsharp, Oct 12 '15 at 18:55
This is what the spec is for, along with countless articles on this subject on the internet. — Rob, Oct 13 '15 at 03:05

score 1 · Accepted Answer · edited May 23 '17 at 10:27

I recommend wrapping each of your blog posts in an <article> element.

According to the W3C spec:

"The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment [...]"

This answer succinctly describes the purpose of each of the major HTML5 element tags.

The three sections you described can be included as child elements of the article, so your code for each blog post could look something like:

<article class="blog_post">
  <header>
    <h1>Blog Post Title</h1>
  </header>
  <aside class="blog_sidebar">
    <!-- sidebar content -->
  </aside>
  <p>Aliquam luctus sapien ut dui. Ut lacinia vel ex et sodales. Nam molestie semper purus, id efficitur metus malesuada fermentum. Morbi commodo neque mauris, id commodo ante sodales sed. Maecenas purus risus, dictum ut sem sceleris.</p>
</article>

Some recommended reading:

The Article Element

The Importance of Sections

Putting an aside inside of an article suggests that its content is related to the article, which in some cases isn't, like secondary navigation. But it seems like the best way to handle this. — JMRC, Oct 13 '15 at 10:44

article devided over multiple sections

1 Answers1