Суть: смысл важнее внешнего вида
Любой блок страницы можно собрать из безликих <div> — браузер отрисует то же самое. Но HTML придуман, чтобы описывать роль содержимого, а не только его расположение. Если блок — это шапка, навигация или статья, его лучше назвать соответствующим семантическим элементом, чем прятать в одинаковые <div>. Тогда разметка сама объясняет, что есть что.
Семантические теги — как таблички на дверях в офисе. Можно повесить на все двери одинаковые серые прямоугольники (<div>) — войти всё равно получится, но придётся открывать каждую и проверять, что внутри. А можно подписать: «Ресепшн» (<header>), «Указатель» (<nav>), «Главный зал» (<main>), «Подсобка» (<aside>). Курьер, новый сотрудник и робот-уборщик сразу понимают, куда идти — не открывая ни одной двери. Скринридер и поисковик читают эти таблички так же.
Как это выглядит: макет страницы
Семантические блоки складываются в узнаваемый каркас почти любой страницы: шапка сверху, навигация, основная область с главным содержимым и боковой колонкой, подвал снизу.
<header> сверху, <nav> под ним, <main> с <article> и <aside> в середине, <footer> снизу.Основные семантические элементы
<header>— шапка документа или раздела (логотип, заголовок).<nav>— блок навигационных ссылок.<main>— основное содержимое страницы, ровно один раз на документ.<section>— тематический раздел, обычно с заголовком.<article>— самостоятельный материал (статья, пост, карточка).<aside>— побочная информация, боковая колонка.<footer>— подвал документа или блока.<figure>и<figcaption>— иллюстрация и её подпись.
Как это работает внутри браузера
Браузер строит на основе разметки дерево доступности — карту страницы, которой пользуются скринридеры и автоматические инструменты. Семантические теги добавляют в это дерево «ориентиры» (landmarks): <nav> становится областью навигации, <main> — основной областью. Из обычных <div> ориентиры не создаются — для машины это просто безымянные контейнеры.
Значение: доступность
Скринридеры умеют перепрыгивать сразу к ориентирам: «к основному содержимому», «к навигации». Если шапка, меню и контент описаны семантически, незрячий пользователь перемещается по странице за пару нажатий, а не слушает её целиком. Это и есть практическая польза семантики.
Значение: SEO и поддержка
Поисковые роботы по семантике точнее определяют, где главное содержимое страницы, а где второстепенные блоки — это помогает индексации. А для команды разметка работает как карта: разработчик видит роли блоков сразу, без чтения CSS, поэтому быстрее находит нужное место и реже ломает чужой код.
Когда использовать <figure> и <figcaption>
<figure> подходит для самостоятельной иллюстрации, схемы, цитаты или блока кода, которому нужна подпись. <figcaption> связывает подпись с содержимым в структуре документа, поэтому скринридер прочитает её как описание именно этой иллюстрации.