Смысловая структура страницы

У большинства страниц похожая общая форма: шапка, меню, основное содержимое и подвал. Для каждой части в HTML есть свой элемент, и экранные дикторы позволяют сразу к ним переходить.

От «каши из div» к ориентирам

Годами страницы строили из элементов <div> с именами классов вроде header или menu. <div> является универсальной коробкой без всякого смысла, так что единственной подсказкой было имя класса, и видели его только те, кто читал код. Теперь в HTML есть элементы, которые говорят, чем является каждая область. Их понимают браузеры, поисковики и вспомогательные технологии, а пользователи экранных дикторов могут открыть список этих областей, называемых ориентирами (landmarks), и перейти к нужной, так же как зрячий пользователь окидывает взглядом вёрстку.

Главные области

• <header>: вводное содержимое, обычно название сайта или логотип и часто главное меню. У статьи тоже может быть своя шапка.
• <nav>: блок основных навигационных ссылок, например меню сайта или оглавление. Не каждой группе ссылок он нужен.
• <main>: содержимое, уникальное для этой страницы. Используй ровно один видимый <main> на страницу и не помещай его внутрь header, nav, aside или footer.
• <article>: самостоятельная часть, которая имела бы смысл и отдельно, например запись в блоге, новость или карточка товара.
• <section>: тематическая часть страницы или статьи, обычно со своим заголовком.
• <aside>: содержимое, связанное с основным, но отдельное от него, например боковая колонка, блок глоссария или связанные ссылки.
• <footer>: завершающие сведения, например автор, авторские права и контактные ссылки.

Эти элементы описывают смысл, а не положение. <nav> не обязан стоять наверху, а <aside> не обязан быть справа; на телефоне aside обычно оказывается под основным содержимым. Положение задаёт CSS. Выбирай элемент, спрашивая себя, чем является содержимое, так же как ты выбирал уровни заголовков по структуре, а не по размеру.

article или section?

Спроси себя: будет ли эта часть понятна сама по себе в другом месте, например в приложении для чтения новостей или если поделиться ссылкой? Если да, это <article>. Если она понятна только как часть чего-то большего, как раздел «Ингредиенты» в рецепте, это <section>. Обычно оба должны начинаться с заголовка. Статьи могут содержать разделы, а раздел может содержать статьи, например раздел «Последние записи» с несколькими карточками записей.

Для div и span ещё есть место

Когда ни один элемент не подходит, используй <div> для блока и <span> для нескольких слов внутри строки. Они полезны как зацепки для CSS, например <div class="cards">, который раскладывает карточки сеткой. Правило такое: сначала берись за смысловой элемент и переходи к универсальному, только когда содержимое ничем не описать. Страница из одних div работает, но прячет свою структуру от всех, кто не смотрит в код.

Быстрая проверка: открой страницу с выключенным CSS или прочитай план заголовков и ориентиров, который показывает расширение браузера. Если страница по-прежнему читается в разумном порядке, с понятной шапкой, меню, основным содержимым и подвалом, структура делает своё дело.

Сначала родные элементы, потом ARIA

Ты можешь встретить атрибут role из стандарта W3C под названием WAI-ARIA, например <div role="navigation">. Он придаёт универсальному элементу смысл для вспомогательных технологий. Руководство W3C по ARIA начинается с простого правила: если в HTML уже есть родной элемент с нужным смыслом, используй его. <nav> короче, работает везде, и его нельзя забыть в одном месте и вспомнить в другом. То же касается кнопок: настоящий <button> бесплатно получает фокус по Tab и нажимается Enter или пробелом, а кликабельному <div> для того же нужен дополнительный код.