How to use <section> and <article> tags in HTML5?

I just confused how to use <article> and <section> tags in HTML5.

I referenced lot in Google and also in Stack Overflow website.

On that, I found HTML5 pages with <section> elements containing <article> elements, and <article> elements containing <sections> elements.

I also found pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.

What is the exact use of these tags?

Solution 1:

It depends on your content.

For example, a list of recent blog posts could be a section containing several article (example 1), a complex blog post could be an article with several section (example 2), a blog post with comments could be an article with a section and several article (example 3).

How to decide when to use which? Easy:

1. If you need a sectioning content element, start with section.
2. Check if the content matches the definition of nav. If yes, go with nav, else:
3. Check if the content matches the definition of aside. If yes, go with aside, else:
4. Check if the content matches the definition of article. If yes, go with article, else:
5. Stay with section.

Example 1: A list of blog posts

<section>
  <h2>Recent blog posts</h2>

  <article>
    <h3>Blog post 1</h3>
  </article>

  <article>
    <h3>Blog post 2</h3>
  </article>

</section>

Example 2: A complex blog post

<article>
  <h2>Blog post 1</h2>

  <section>
    <h3>So, this is what happened</h3>
  </section>

  <section>
    <h3>What the others said</h3>
  </section>

</article>

Example 3: A blog post with comments

<article>
  <h2>Blog post 2</h2>

  <section>
    <h3>Comments</h3>

    <article>
      <p>First!</p>
    </article> 

    <article>
      <p>First! <ins>Edit: Second :(</ins></p>
    </article>        

  </section>

</article>