Долгое время страницы собирали из одних div-ов — где нужен заголовок, ставили div с классом header, где меню — div с классом nav. Работало, но браузеру и поисковику из такого кода сложно понять, что здесь на самом деле происходит. Семантические теги решают именно эту проблему.
Header, nav, main, article, section, aside, footer — каждый из этих тегов описывает не то, как элемент выглядит, а то, чем он является по смыслу. Header — это шапка, nav — блок навигации, footer — подвал страницы. Визуально их можно оформить как угодно через CSS, но смысл остаётся зафиксированным в разметке.
Это важно не только из вежливости к машинам. Скринридеры, которыми пользуются незрячие посетители сайта, ориентируются именно по семантике: человек может сразу перейти к основному контенту, минуя навигацию, если она правильно помечена тегом nav. С div-ами без дополнительных атрибутов такая навигация по странице попросту невозможна.
Поисковые системы тоже опираются на структуру документа при индексации — им проще понять, где основной текст статьи, а где второстепенные блоки вроде рекламы или похожих материалов. Article и section отвечают именно за это разделение.
Переход на семантическую вёрстку не требует никакого волшебства — чаще всего это просто замена части div-ов на подходящие по смыслу теги, без изменения стилей. Подробный список семантических элементов и правила их использования собраны в разделе справочника HTML-элементов на MDN.
На практике удобно представлять страницу как газетный разворот: есть шапка издания, есть основная статья, есть врезка сбоку с дополнительной информацией и подвал с выходными данными. Если раскладывать разметку именно так, семантические теги подбираются почти сами собой, без долгих раздумий над тем, какой из них уместен в конкретном месте.
При этом сам тег div вовсе не становится ненужным — он по-прежнему пригождается там, где нужен просто контейнер для стилизации без особого смысла, например обёртка для сетки карточек. Семантика нужна не везде подряд, а именно в тех местах, где у блока есть чёткая смысловая роль на странице.
