foundation

Semantic HTML

Используйте нативные элементы, landmarks, заголовки, labels и form controls, чтобы assistive technology получала корректную структуру по умолчанию.

Semantic HTML использует нативные элементы по их смыслу, чтобы assistive technology, клавиатура и поисковики получали структуру без лишнего ARIA. Landmarks (`<main>`, `<nav>`, `<header>`), иерархия заголовков, связка `<label>` и настоящие `<button>`/`<a>` — ответ по умолчанию на интервью до кастомных виджетов.

					<main>
  <h1>Checkout</h1>
  <form>
    <label for="email">Email</label>
    <input id="email" type="email" autocomplete="email" />
    <button type="submit">Pay</button>
  </form>
</main>

| Элемент | Зачем | |---------|-------| | `<button>` | Встроенная клавиатурная активация и role | | `<label for>` | Имя поля для screen readers | | Заголовки по порядку | Пропуск уровней ломает outline navigation | | `<nav>` | Прямой переход к регионам навигации |

На интервью: `<button>` vs `<a>`; почему `<div role="button">` — крайний случай; как landmarks помогают rotor-меню screen reader.

Типовые ошибки: div soup с click handlers; только placeholder вместо label; несколько `<h1>` без цели; icon-only кнопки без accessible name.

Компромисс — гибкость дизайна против бесплатной семантики и поведения платформы.

Чеклист:

Нативные контролы для действий и навигации.
У каждого input видимый label.
Логичный outline заголовков.
Проверка keyboard и имён screen reader на новых паттернах.