Семантика

Внешне кнопку можно сделать из чего угодно — из div, span, картинки. Но браузер узнаёт, что это кнопка, только по тегу button. От этого знания зависит, сможет ли пользователь дойти до неё клавишей Tab, нажать пробелом, и что скажет экранный диктор. Семантика — это про то, что элемент значит, а не про то, как он нарисован.

Браузер собирает из разметки дерево доступности: у каждого узла есть роль (кнопка, ссылка, заголовок второго уровня, список), имя и состояние. Именно его читают вспомогательные технологии. У большинства тегов роль встроенная: nav — навигация, h2 — заголовок, a href — ссылка. У div и span смысловой роли нет.

Пример: кнопка с семантикой и без

<!-- Выглядит как кнопка, но для клавиатуры и диктора её нет -->
<div class="btn" onclick="addToCart()">В корзину</div>

<!-- Фокус, Enter, пробел и роль «кнопка» — сразу -->
<button type="button" class="btn" onclick="addToCart()">В корзину</button>

Чтобы дотянуть первый вариант до второго, придётся добавить role="button", tabindex="0" и обработчик клавиш. Проще сразу взять нужный тег.

Семантика атрибутов и текстовых тегов

• type="email" и type="tel" у поля ввода меняют клавиатуру на телефоне и включают проверку формата.
• strong означает важность, b — лишь выделение без смыслового веса. То же с em и i.
• time datetime="2026-10-10" делает дату понятной машине при любом формате на экране.
• Атрибуты ARIA добавляют роль и состояние там, где подходящего тега нет. Первое правило ARIA: если есть родной элемент — используй его.

Чем отличается от семантической разметки

Семантика — свойство отдельного элемента. Семантическая разметка — подход к вёрстке всей страницы: области шапки, навигации, основного содержимого и подвала, иерархия заголовков. Одно вытекает из другого, но первое — про смысл тега, второе — про структуру документа. Проверить результат помогает вкладка Accessibility в инструментах разработчика: там видно, какую роль и имя получил элемент. Зачем это нужно людям, подробно — в статье про доступность интерфейса.