Чем отличается элемент section от div и article в семантической верстке?

Отличия элементов section, div и article в семантической вёрстке заключаются в их назначении и характере содержимого: 13

1. div — универсальный блочный элемент, у которого нет полноценного самостоятельного значения. 1 Предназначен для группировки контента, который семантически никак не связан между собой. 1 Чаще всего используется как контейнер для других элементов. 1
2. section — более конкретный элемент, который применяется к общим разделам контента, семантически связанного между собой. 13 Содержимое тега имеет «тему», которую необходимо указать с помощью заголовка. 1 Например, блок новостей, преимуществ или услуг на сайте. 3
3. article — ещё более уточняющий и конкретный элемент, чем section. 1 Применяется к семантически связанному блоку контента и должен иметь заголовок. 1 Содержимое должно быть независимым и самодостаточным — это отдельная статья. 1 Чаще всего используется для статьи на сайте, отдельной новости, поста блога, сообщения форума или комментариев. 1

Таким образом, div используется, когда контент никак не связан между собой, section — когда есть семантическая логика и вложенные элементы, которые можно объединить в рамках единого смыслового блока, а article — когда контент имеет сильную семантическую взаимосвязь и может быть выделен из контекста сайта без ущерба смысловой нагрузки. 3