如何使用 <section> 和 <article> HTML5中添加标签？

Question

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?

Answer 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>