Нумерация страниц: ссылки и обозначение текущей страницы
Постраничная навигация должна позволять открыть конкретную часть списка обычной ссылкой. Текущая страница обозначается отдельно, чтобы посетитель понимал своё положение.
Назначение
Постраничная навигация должна позволять открыть конкретную часть списка обычной ссылкой. Текущая страница обозначается отдельно, чтобы посетитель понимал своё положение.
Как это работает
Nav получает понятное имя, список сохраняет последовательность, aria-current="page" обозначает активную страницу. Flex-wrap допускает перенос ссылок на узком экране. В демонстрации адреса заменены локальными якорями.
Пример
<style>.pages{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none}.pages a{display:block;padding:.65rem .9rem;border:1px solid #6c8979}.pages [aria-current="page"]{font-weight:700;background:#e1f2e7}</style>
<nav aria-label="Страницы учебного списка"><ul class="pages">
<li><a href="#page-one" aria-label="Страница 1" aria-current="page">1</a></li><li><a href="#page-two" aria-label="Страница 2">2</a></li><li><a href="#page-three" aria-label="Страница 3">3</a></li>
</ul></nav><h2 id="page-one">Часть 1</h2><h2 id="page-two">Часть 2</h2><h2 id="page-three">Часть 3</h2>Что должно получиться
Ссылки доступны клавиатурой и допускают обычное открытие. Первый пункт отмечен как текущий для статической демонстрации. В рабочем каталоге сервер должен менять отметку и выдавать содержимое нужной страницы.
Граница применения и частая ошибка
CSS не обновляет aria-current при переходе. Не ставьте href="#" вместо адреса существующей страницы и не называйте неактивную ссылку disabled без изменения её поведения. Сокращение длинного списка страниц должно сохранять доступ к соседним частям.
Самостоятельная проверка
Замените якоря адресами своего тестового каталога. Откройте вторую страницу напрямую и убедитесь, что выделена только она. Проверьте первый и последний лист списка, где не существует предыдущего или следующего перехода.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.