Семантическая разметка навигации помогает обозначить назначение меню и связи между его пунктами. Используйте <nav> для крупных блоков навигационных ссылок, списки - для связанных пунктов, а <a> - для перехода на страницу или к разделу. Выбирайте структуру по функции меню, а не по его внешнему виду: это упрощает поддержку и проверку доступности.
Опорные правила разметки навигации
- Оборачивайте в
<nav>важные блоки навигации, а не каждую группу ссылок на странице. - Используйте
<ul>для набора пунктов без заданного порядка;<ol>- когда порядок важен. - Для переходов на другие страницы или к разделам ставьте ссылки
<a>, а не стилизованные элементы без ссылки. - Называйте ссылку понятно по её назначению и обозначайте текущую страницу через
aria-current="page". - Проверяйте меню клавиатурой и сопоставляйте его структуру с тем, как оно представлено визуально.
Когда навигации нужен элемент <nav>
<nav> подходит для основного меню сайта, навигации по разделам и блока ссылок, помогающего перемещаться по странице. Элемент сообщает вспомогательным технологиям, что внутри находится важная навигация.
Не оборачивайте в <nav> каждую одиночную ссылку, набор ссылок в тексте или все группы ссылок подряд. Для небольшого блока, который не выполняет навигационную задачу, достаточно подходящей структуры без этого элемента. Если на странице несколько элементов <nav>, задайте им разные доступные названия, например "Основное меню" и "Навигация по статье".
Список ссылок: где уместны <ul> и <ol>
Перед разметкой определите назначение меню: так проще выбрать контейнер и порядок пунктов. Для большинства меню, где ссылки перечисляют разделы без приоритета последовательности, подходит маркированный список <ul>. Нумерованный <ol> нужен, если порядок пунктов влияет на смысл - например, в пошаговой навигации.
Для работы понадобятся доступ к HTML-шаблону или редактору сайта, перечень целевых страниц и понимание назначения меню. Если сайт работает через CMS, проверьте, позволяет ли шаблон управлять семантической разметкой, а не только визуальным оформлением.
Как оформить вложенные пункты меню
-
Определите уровни меню.
Сгруппируйте ссылки по смыслу и решите, какие пункты являются подразделами других пунктов. -
Создайте внешний список.
Оберните основные пункты в<ul>или<ol>и поместите каждую ссылку в отдельный элемент<li>. -
Вложите список в родительский пункт.
Подразделы размещайте внутри того<li>, к которому они относятся, а не рядом с ним.- Сначала укажите родительский пункт.
- Затем добавьте внутрь его элемента список дочерних ссылок.
-
Проверьте соответствие ссылок.
Убедитесь, что каждый пункт ведёт к нужному адресу, а вложенность отражает структуру разделов сайта.
Быстрый режим
- Выберите важные блоки навигации и обозначьте их через
<nav>. - Для набора пунктов добавьте список и отдельный
<li>для каждой ссылки. - Вложите подменю внутрь элемента родительского пункта.
- Проверьте названия ссылок, активную страницу и навигацию с клавиатуры.
Текст ссылки и доступное имя навигационного пункта
Текст ссылки должен помогать понять, куда она ведёт. Формулировки вроде "Подробнее" или "Перейти" без контекста могут быть неясны, особенно при просмотре списка ссылок отдельно от окружающего текста.
Проверьте результат по списку:
- Текст каждой ссылки описывает её цель или назначение.
- Похожие ссылки различаются там, где ведут на разные страницы.
- Ссылка содержит видимый текст либо подходящее доступное имя, если используется графический элемент.
- Изображение-ссылка имеет альтернативный текст, передающий назначение перехода.
- Иконка рядом с понятным текстом не создаёт дублирующего или противоречивого имени.
- Название блока навигации различает его среди других меню на странице.
- Текст ссылки не сообщает о переходе действием, которое фактически не выполняется.
Текущая страница: как обозначить активный пункт
На ссылке, соответствующей открытой странице, уместно указать aria-current="page". Визуальное выделение активного пункта также полезно, но не заменяет семантическое обозначение.
Проверьте типичные ошибки:
- Активный пункт выделен только цветом, который может быть трудно различить.
aria-current="page"проставлен сразу на нескольких пунктах одного меню.- Атрибут назначен ссылке, ведущей на другую страницу, а не на текущую.
- Текущая страница обозначена как обычный переход без визуального или программного различия.
- Для текущего пункта используется неверное значение атрибута, хотя речь идёт именно о странице.
- Активное состояние теряется при переходе между шаблонами или разделами сайта.
Ошибки в разметке меню и быстрая проверка
При проверке учитывайте назначение блока, а не только его вид. Семантическая разметка сайта поддерживает понятную структуру сайта для SEO и доступности, но сама по себе не гарантирует улучшения позиций. При SEO оптимизации сайта проверяйте также адреса и содержание страниц, на которые ведут пункты; навигация сайта SEO - только один из аспектов общей структуры.
- Оставить ссылки без списка. Это допустимо для отдельных ссылок, но список обычно лучше передаёт набор однородных пунктов меню.
- Использовать список без навигационного контейнера. Подходит для группы ссылок, если она не является важным блоком навигации.
- Назвать несколько меню одинаково. Если на странице несколько навигационных блоков, задайте им различимые доступные названия.
- Проверить только визуальный результат. Дополнительно пройдите ссылки клавишей Tab и проверьте, что фокус виден, а переходы работают.
При разработке сайта под ключ включите эту проверку в приёмку шаблонов: просмотрите главное меню, подменю и навигацию внутри контента на разных типах страниц.
Разбор спорных случаев в разметке меню
Нужно ли оборачивать в <nav> все ссылки на странице?
Нет. Используйте элемент для значимых блоков навигации, а не для каждой ссылки в тексте или небольшого набора ссылок без навигационной функции.
Обязателен ли список внутри <nav>?
Нет, HTML не требует списка для каждого блока <nav>. Однако для меню из однородных пунктов список обычно ясно отражает их группировку.
Когда выбирать <ol> вместо <ul>?
Выбирайте <ol>, когда порядок элементов важен для смысла или выполнения задачи. Для обычного меню разделов чаще подходит <ul>.
Можно ли сделать названием ссылки только иконку?
Можно, если ссылка получает доступное имя, которое объясняет назначение перехода. Одной визуальной иконки без доступного текстового обозначения недостаточно.
Нужно ли ставить aria-current на родительский пункт раздела?
Ставьте aria-current="page" на ссылку, которая соответствует текущей странице. Не обозначайте этим значением родительский раздел, если его ссылка ведёт на другую страницу.
Как проверить меню без специальных программ?
Перемещайтесь по странице клавишей Tab, следите за видимым фокусом и активируйте ссылки клавишей Enter. Затем проверьте, что названия пунктов понятны и переходы ведут туда, куда ожидается.