Section vs Article HTML5

Question

I have a page made up of various "sections" like videos, a newsfeed etc.. I am a bit confused how to represent these with HTML5. Currently I have them as HTML5 <section>s, but on further inspection it looks they the more correct tag would be <article>. Could anyone shed some light on this for me?

None of these things are blog posts or "documents" in the true sense of the word so it's kind of hard to see which element to apply.

Cheers

EDIT: I have opted to use the article tag since it seems to be a container tag for unrelated elements which I guess my "sections" are. The actual tagname article however seems to be rather misleading and although they are saying HTML5 has been developed with greater consideration for web applications, I find a lot of the tags to be more blog-centric / document based.

Anyway thanks for your answers it appears to be fairly subjective.

Answer 1

In the W3 wiki page about structuring HTML5, it says:

<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.

And then displays an image that I cleaned up:

It also describes how to use the <article> tag (from same W3 link above):

<article> is related to <section>, but is distinctly different. Whereas <section> is for grouping distinct sections of content or functionality, <article> is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then <article> is suitable for marking them up.

In our example, <section id="main"> contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore <article> is perfect for them:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>