Семантика і структура

div нічого не означає: це коробка для стилів. Семантичні теги означають. Скринрідер оголосить «банер», «навігація», «основне». Пошуковик зрозуміє, де стаття, а де підвал. Людина з клавіатури стрибне до main, оминаючи шапку.

• header — шапка сторінки або шапка секції. Логотип, назва, навігація.
• nav — блок посилань для переходів сайтом або сторінкою. Не кожна купа посилань — nav.
• main — основний вміст цієї сторінки. На документі він один.
• section — тематичний шматок зі своїм заголовком.
• article — завершена штука: пост, картка курсу, коментар. Має сенс сама по собі.
• aside — збоку від головної думки: зміст, реклама, «читайте також».
• footer — підвал сторінки або секції: копірайт, контакти, другорядні посилання.

Коли все-таки div

div доречний, коли групи немає в мові: сітка з трьох колонок, обгортка для гріда, коробка, яку рухає скрипт. Якщо в блока є роль у документі — бери семантичний тег. Не загортай кожен абзац у section «про всяк випадок»: секція без заголовка нічого не дає.

Не плутай article і section. Стаття — одиниця, яку можна вийняти й прочитати окремо. Секція — розділ усередині. Картка курсу в каталозі — article. Розділ «Форми» всередині уроку — section. Розбір орієнтирів — у MDN · семантика.