Как использовать теги <section> и <article> в HTML5?

Question

Я просто запутался, как использовать <article> а также <section> теги в HTML5.

Я ссылался много в Google, а также на веб-сайте Stack Overflow.

На этом я нашел страницы HTML5 с <section> элементы содержащие <article> элементы и <article> элементы содержащие <sections> элементы.

Я также нашел страницы с <section> элементы содержащие <section> элементы и <article> элементы содержащие <article> элементы.

Каково точное использование этих тегов?

Answer 1

Это зависит от вашего контента.

Например, список последних сообщений в блоге может быть section содержащий несколько article (пример 1), сложная запись в блоге может быть article с несколькими section (пример 2), сообщение в блоге с комментариями может быть article с section и несколько article (пример 3).

Как решить, когда использовать какой? Легко:

1. Если вам нужен элемент контента секционирования, начните с section,
2. Проверьте, соответствует ли содержание определениюnav, Если да, то иди с navеще:
3. Проверьте, соответствует ли содержание определениюaside, Если да, то иди с asideеще:
4. Проверьте, соответствует ли содержание определениюarticle, Если да, то иди с articleеще:
5. Оставаться с section,

---

Пример 1: список постов в блоге

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

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

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

</section>

Пример 2: сложная запись в блоге

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

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

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

</article>

Пример 3: пост в блоге с комментариями

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