С появлением HTML5 появились семантические теги <section> и <article> — альтернатива универсальному <div> для построения семантических макетов.

<div>

Общий элемент, служит для группировки любого типа контента. Используйте его как последнюю меру, когда нет подходящей семантической альтернативы. Идеален для враппера страницы и стилизации.

  

    
Наши возможности
    
...
  

<section>

Секция объединяет контент, семантически связанный между собой: новости, преимущества, услуги. Требует обязательного заголовка.

  
Наш блог
  
...
  
...

<article>

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

  
Заголовок статьи
  
Содержимое статьи...

Правила выбора

Несвязанный контент или стилизация — используйте <div>. Семантически связанный контент с заголовком — используйте <section>. Независимый, самодостаточный контент — используйте <article>.

Комбинирование тегов

Элементы можно вкладывать друг в друга: <section> может оборачивать несколько <article>, а <article> может содержать <section> для организации связанной информации внутри.