Как отличить `div`, `section` и `article`?

Семантика, не внешний вид

Все три по умолчанию блочные. Разница — смысл для a11y, SEO и структуры документа.

div

Универсальный контейнер без семантики. Стили, сетка, обёртка под JS — когда нет более точного тега.

section

Тематическая группа контента, обычно с заголовком. Часть документа, не обязательно независимо переиспользуемая.

article

Самодостаточная единица: пост, карточка новости, виджет комментария — имеет смысл вне контекста страницы.

<article>
  <h2>Заголовок поста</h2>
  <section>
    <h3>Введение</h3>
    <p>...</p>
  </section>
</article>

Практика

Не оборачивайте всё в section/article «для SEO». Landmark-роли (main, nav, aside) важнее, чем вложенные section без заголовков.