CODEWITHSUNDEEP
html
JMRC
JMRC

Reputation: 1514

article devided over multiple sections

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.

enter image description here

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

Upvotes: 1

Views: 57

Answers (1)

Juan Vazquez
Juan Vazquez

Reputation: 543

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

Upvotes: 1

Related Questions