<article>

Тег <article> обозначает законченный и самодостаточный раздел документа, описывающий какую-то сущность: товар, карточку пользователя, рекламный баннер, виджет.

        
          
          <article>  <h1>Тег <code>&lt;article&gt;</code>, и с чем его едят</h1>  <h2>Кратко</h2>  <p>    Тег <code>&lt;article&gt;</code> обозначает законченный и самодостаточный    раздел документа, описывающий какую-то сущность: статью, товар, карточку    пользователя и т. д.  </p>  <h2>Пример</h2>  <pre>    <code>Рекурсия! 💥</code>  </pre></article>
          <article>
  <h1>Тег <code>&lt;article&gt;</code>, и с чем его едят</h1>
  <h2>Кратко</h2>
  <p>
    Тег <code>&lt;article&gt;</code> обозначает законченный и самодостаточный
    раздел документа, описывающий какую-то сущность: статью, товар, карточку
    пользователя и т. д.
  </p>
  <h2>Пример</h2>
  <pre>
    <code>Рекурсия! 💥</code>
  </pre>
</article>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <article>  <!-- Содержимое --></article>
          <article>
  <!-- Содержимое -->
</article>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Тег <article> семантически «помечает», что его содержимое — это какая-то одна конкретная сущность. Никакого поведенческого или иного оформления это не даёт, визуально выглядит как блочный <div>-элемент.

В отличие от тега <article>, который помечает самодостаточный элемент документа, <section> является частью какого-то раздела. Но единственного и абсолютного правила тут нет — всё на усмотрение автора.

Например, если мы верстаем книгу с главой «Бран», повествующей «о 7-летнем юноше, сыне лорда Винтерфелла», то это скорее всего <section>, так как в книге наверняка есть и другие разделы (главы, не обязательно только об этом персонаже).

С другой стороны, можно представить твит, виджет с погодой или рекламный баннер — каждый из этих блоков будет уже <article>, потому что каждый из них полноценен и самодостаточен по своему содержанию.