foundation

Landmarks и заголовки

Представляйте области страницы и иерархию заголовков, чтобы assistive tech и краулеры понимали страницу.

Landmarks — `header`, `nav`, `main`, `aside`, `footer` — описывают области страницы. Заголовки задают иерархию содержимого, а не размер шрифта. Вместе они позволяют пользователям клавиатуры и screen reader перемещаться по странице и помогают краулерам понять связи секций.

На странице один `main`. Уровни заголовков не пропускают ради стилей. Повторяющимся nav полезен `aria-label`, если подпись не видна.

					<body>
  <header>...</header>
  <nav aria-label="Основная навигация">...</nav>
  <main>
    <h1>Настройки аккаунта</h1>
    <section aria-labelledby="profile-heading">
      <h2 id="profile-heading">Профиль</h2>
    </section>
  </main>
</body>

На интервью: один main, упорядоченные headings и когда div всё ещё уместен.

Типовые ошибки: пропуск уровней заголовков, неправильная вложенность интерактивных элементов, ARIA-роли, противоречащие нативной семантике.

Компромисс: семантическая насыщенность против удобства layout — landmarks помогают навигации, но избыточная структура путает.

Чеклист:

Один `main` на документ.
Заголовки по структуре, не по виду.
Именуйте повторяющиеся nav.
Семантические элементы важнее role.