- html5css.dev
- SEO
- SEO продвижение
- Юзабилити сайта
- Навигация и ссылки
Навигация и ссылки
Навигация отвечает на два вопроса: где я и куда дальше. Разбираем устройство меню, крошки и оформление ссылок — включая то, что часто ломают из эстетических соображений.
Главное меню
- 5–7 пунктов в видимой части. Больше — теряется различимость.
- Названия разделов человеческим языком, а не внутренними терминами компании.
- Текущий раздел подсвечен — человек должен видеть, где он.
- Обычные
<a href>, а не элементы с обработчиком клика: иначе робот их не увидит. - Все разделы остаются в разметке и на мобильном — прятать визуально можно, вырезать нельзя.
- Меню доступно с клавиатуры:
aria-expanded, закрытие по Esc, возврат фокуса.
Устройство мобильной шторки разобрано в уроке о мобильной навигации.
Хлебные крошки
<ol class="crumbs">
<li><a href="/">Главная</a></li>
<li><a href="/smesiteli/">Смесители</a></li>
<li><a href="/smesiteli/dlya-kuhni/">Для кухни</a></li>
<li><span aria-current="page">Grohe 32843</span></li>
</ol>- Текущая страница — не ссылка, помечена
aria-current="page". - Разметка
BreadcrumbList— заменяет URL в сниппете на путь. - На мобильном занимают одну строку; длинные названия сокращаются, а не переносятся на три строки.
Оформление ссылок
| Правило | Почему |
|---|---|
| Ссылки в тексте подчёркнуты | Отличие не только цветом — требование доступности |
| Цвет ссылок отличается от текста | Заметность |
| Есть состояние наведения | Обратная связь |
| Есть видимый фокус | Навигация с клавиатуры |
| Посещённые отличаются | Помогает не ходить по кругу |
| Анкор описывает цель | «Здесь» и «подробнее» бесполезны — см. урок о качестве ссылок |
| Зона нажатия от 44 px | Палец вместо курсора |
.doc a { color: var(--acc); text-decoration: underline; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.doc a:visited { color: var(--acc-visited); }Новая вкладка
| Тип ссылки | Решение |
|---|---|
| Внутренние | В той же вкладке: иначе ломается кнопка «назад» |
| Внешние в тексте | Обычно та же вкладка; пользователь решит сам |
| Документы, PDF | Новая вкладка уместна, с пометкой формата |
| Формы и оплата | Та же вкладка: терять контекст нельзя |
Если открываете в новой вкладке — добавляйте rel="noopener"
и обозначайте это визуально, чтобы человек не удивился.
<a href="https://example.com/" target="_blank" rel="noopener">
Исследование Example
<span class="sr-only">(откроется в новой вкладке)</span>
</a>Навигация внутри длинной страницы
- Оглавление из H2/H3 для материалов длиннее пяти разделов.
- Якоря на заголовках — чтобы можно было сослаться на конкретный раздел.
- Кнопка «наверх» на длинных страницах.
- Ссылки на соседние материалы в конце — следующий логичный шаг.
scroll-padding-top, если шапка липкая: иначе якорь уводит заголовок под неё.
Итог
Навигация должна отвечать на «где я» и «куда дальше»: компактное меню с подсвеченным разделом, крошки с разметкой и ссылки, которые видно и по которым понятно, куда они ведут. Внутренние ссылки открываются в той же вкладке. Дальше — макет сайта.
Частые вопросы
Сколько пунктов должно быть в главном меню?
5–7 в видимой части. Больше — человек перестаёт их различать. Остальное уводится во вложенные уровни, но обязательно остаётся в HTML: вырезание из мобильного меню обрывает внутренние ссылки.
Нужно ли подчёркивать ссылки в тексте?
Да. Подчёркивание — единственный способ отличить ссылку, не полагаясь на цвет. Без него люди с нарушением цветовосприятия и на плохом экране ссылок не увидят.
Открывать ссылки в новой вкладке?
Внутренние — нет: это ломает кнопку «назад». Внешние — по ситуации; если открываете, добавляйте rel="noopener" и предупреждайте пользователя визуально.
Нужны ли хлебные крошки, если есть меню?
Да. Человек часто приходит из поиска сразу на глубокую страницу и не понимает, где находится. Крошки занимают одну строку и дают разметку BreadcrumbList для сниппета.