Кратко опишите правильное использование семантических элементов HTML5: `header`, `section`, `article`, `nav`

По полочкам

Семантика помогает понять роль блока браузеру, AT и людям в коде — не «красивые div».

Назначение

• header — вводная часть страницы или секции (лого, название, нав иногда внутри).
• nav — блок основной навигации по сайту/разделу (не каждая кучка ссылок).
• section — тематический раздел с собственным заголовком; не как обёртка «для стилей».
• article — независимое законченное содержимое (пост, карточка новости, виджет), которое имеет смысл отдельно.

<header>
  <nav aria-label="Основная">...</nav>
</header>
<main>
  <article>
    <header><h1>Заголовок поста</h1></header>
    <section>
      <h2>Глава</h2>
      <p>...</p>
    </section>
  </article>
</main>

Итог

Выбирайте элемент по смыслу; для стилей без роли — div.