Пагинация — это разбивка длинного списка на пронумерованные страницы с элементами навигации «предыдущая — номера — следующая». Семантически корректный каркас: тег <nav> с aria-label, внутри — список <ul> со ссылками, а текущая страница помечена aria-current="page". Базовый пример:
<nav aria-label="Навигация по страницам">
<ul class="pagination">
<li><a href="?page=1" aria-label="Предыдущая">«</a></li>
<li><a href="?page=1">1</a></li>
<li><a href="?page=2" aria-current="page">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=3" aria-label="Следующая">»</a></li>
</ul>
</nav>
Обновлено: июль 2026. Материал редакции Зерокодера.
Дальше — почему это лучше, чем распространённый вариант с <div> и просто ссылками внутри, как верстать состояния, сжимать блок на мобильных и что делать с SEO.
- Каркас — <nav> > <ul> > <li> > <a>, а не «дивы со ссылками».
- Текущая страница —
aria-current="page", и только одна на набор. - Неактивные стрелки —
aria-disabled, а не «мёртвая» ссылка. - На узком экране схлопывайте номера через «…», оставляя первую, последнюю и соседние.
- Метатеги
rel="prev"/"next"Google для индексации не использует с 2019 года.
Что такое пагинация и когда она нужна
Пагинация делит массив контента на порции и выводит по одной странице за раз, добавляя блок навигации для перехода между ними. Это снижает объём данных на запрос, ускоряет отрисовку и даёт пользователю понятную точку возврата: он видит, на какой он странице и сколько их всего.
Она уместна там, где важен доступ к конкретной позиции и предсказуемость: результаты поиска, каталоги товаров, таблицы, архивы статей, админ-панели. Если пользователь ищет что-то конкретное и позиция элемента имеет значение, страницы с номерами работают лучше сплошной ленты — к нужному месту можно вернуться по адресу вида ?page=7.
Пагинация проигрывает там, где контент просматривают потоком без цели найти конкретный элемент — ленты соцсетей, визуальные галереи. Там привычнее подгрузка. Об этом — в разделе про альтернативы.
Вывод: пагинация — про адресуемость и контроль, а не про «красивые кнопки внизу».
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
- Где и как применять? Потестируем модель после установки на разных задачах
- Как дообучить модель под себя?
Семантическая разметка пагинации: nav, ul и ARIA
Типичная ошибка, которую тиражируют шаблоны, — контейнер <div class="pagination"> с голыми ссылками. Визуально работает, но для скринридера это просто набор ссылок без роли и границ. Правильный каркас несёт смысл сам по себе.
Обёртка — тег <nav>. По определению MDN, элемент <nav> «представляет раздел страницы, задача которого — предоставить навигационные ссылки». У него неявная ARIA-роль navigation, и вспомогательные технологии выделяют такой блок как ориентир (landmark), позволяя перепрыгнуть к нему.
Если на странице несколько блоков навигации (главное меню, хлебные крошки, пагинация), каждому дают своё имя через aria-label или aria-labelledby — иначе пользователь скринридера услышит несколько одинаковых «navigation» и не различит их. Для пагинации подойдёт aria-label="Навигация по страницам".
Внутри — список <ul> с <li>: номера страниц логически являются списком, и скринридер объявит их количество («список из 7 элементов»). Текущую страницу помечают атрибутом aria-current="page". Значение page по документации означает «текущую страницу в наборе страниц, например ссылку на текущий документ». Важное правило документации MDN по aria-current: пометить как current можно только один элемент набора.
<nav aria-label="Навигация по страницам">
<ul class="pagination">
<li><a href="?page=2" rel="prev" aria-label="Предыдущая страница">«</a></li>
<li><a href="?page=1">1</a></li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3" aria-current="page">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=4" rel="next" aria-label="Следующая страница">»</a></li>
</ul>
</nav>
Вывод: <nav> > <ul> > <li> > <a> плюс aria-label и aria-current — это тот же визуал, но с полноценной доступностью и без единого лишнего скрипта.
Как сверстать пагинацию на HTML и CSS
Разметка выше — уже рабочая. Осталось стилизовать. Сбрасываем маркеры списка, выстраиваем элементы в ряд через flex и оформляем ссылки как кликабельные ячейки.
.pagination {
display: flex;
justify-content: center;
gap: 6px;
list-style: none;
padding: 0;
margin: 24px 0;
font: 15px/1 system-ui, sans-serif;
}
.pagination a {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid #d7d7e0;
border-radius: 8px;
color: #333;
text-decoration: none;
transition: background-color .15s, border-color .15s;
}
Ширина ячеек задана через min-width и высоту, а не через жёсткий размер, чтобы двузначные номера не ломали ряд. Единицы измерения — относительные, размеры кликабельной зоны — не меньше 40 px, это комфортно для пальца на тач-экране.
Активная страница, наведение и фокус
Три состояния, которые нельзя опускать: текущая страница, наведение и фокус с клавиатуры. Активную стилизуем по атрибуту aria-current, а не по классу — так стиль и семантика не разъезжаются.
/* Текущая страница */
.pagination a[aria-current="page"] {
background: #4f46e5;
border-color: #4f46e5;
color: #fff;
font-weight: 600;
}
/* Наведение — только на некликнутых */
.pagination a:not([aria-current="page"]):hover {
background: #f3f3fb;
border-color: #c3c3d6;
}
/* Фокус с клавиатуры — обязателен */
.pagination a:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
Никогда не убирайте контур фокуса без замены. outline: none без альтернативы делает навигацию с клавиатуры невидимой. Псевдокласс :focus-visible показывает контур только при управлении с клавиатуры и не мешает тем, кто кликает мышью.
Неактивные стрелки: disabled правильно
На первой странице стрелка «назад» должна быть неактивна. Ссылка <a> не умеет быть по-настоящему disabled, поэтому её либо заменяют на <span> без href, либо помечают aria-disabled="true" и убирают из порядка табуляции.
<li><span class="disabled" aria-disabled="true">«</span></li>
.pagination .disabled {
display: flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px; padding: 0 12px;
border: 1px solid #ececf2; border-radius: 8px;
color: #b6b6c2; cursor: not-allowed;
}
Вывод: стили вешайте на семантику ([aria-current], [aria-disabled]), а не на декоративные классы — меньше рассинхрона.
Адаптивность: как сжать пагинацию на мобильных
Двадцать номеров в ряд не помещаются на экране шириной 360 px. Решение — показывать не все страницы, а «окно»: первую, последнюю, текущую и пару соседних, а разрывы заменять многоточием.
<li><a href="?page=1">1</a></li>
<li><span class="ellipsis">…</span></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7" aria-current="page">7</a></li>
<li><a href="?page=8">8</a></li>
<li><span class="ellipsis">…</span></li>
<li><a href="?page=20">20</a></li>
Само «окно» считается на бэкенде или в JS: обычно берут диапазон текущая ± 1–2 плюс крайние. Многоточие — это <span>, а не ссылка: кликать по нему некуда. На совсем узких экранах можно медиазапросом спрятать дальние номера, оставив стрелки и текущую страницу.
@media (max-width: 480px) {
.pagination .hide-sm { display: none; }
.pagination a { min-width: 44px; }
}
Вывод: на мобильном цель — не «уместить всё», а сохранить стрелки, текущую и точки входа в начало и конец.
Доступность: клавиатура и скринридеры
Если каркас собран на <a> и <button>, клавиатура работает без единой строки JS: по ссылкам ходят Tab-ом, активируют Enter. Это и есть аргумент против пагинации на <div onclick> — такие «кнопки» не попадают в фокус и не жмутся с клавиатуры.
- Порядок фокуса — визуальный порядок ссылок должен совпадать с порядком в DOM.
- Видимый фокус —
:focus-visibleс контуром, ничего не прячьте. - Имена стрелок — символы ««» и «»» скринридер прочитает невнятно, поэтому давайте
aria-label="Предыдущая страница". - Одна текущая — ровно один
aria-current="page"на набор. - Многоточие и disabled — не должны быть в порядке табуляции.
Проверка простая: уберите мышь и пройдите блок только Tab и Enter. Видно, где фокус, понятно, куда ведёт стрелка, текущая страница очевидна — значит, доступность собрана.
Вывод: доступность пагинации почти целиком берётся из правильных тегов, а не из ARIA-надстроек поверх дивов.
Альтернативы: бесконечный скролл и «Показать ещё»
Пагинация — не единственный паттерн. Есть бесконечная прокрутка (контент подгружается при скролле) и кнопка «Показать ещё» (догрузка по клику). Выбор зависит от задачи и от того, важна ли поисковая индексация.
| Критерий | Пагинация | Бесконечный скролл |
|---|---|---|
| Доступ к конкретной странице | Есть, по адресу ?page=N |
Нет, только последовательный проход |
| SEO / индексация | Роботы проходят по ссылкам | Риск: до первого экрана, остальное в JS не видно |
| Возврат к месту | Простой — страница в URL | Сложный — позицию легко потерять |
| Ощущение объёма | Видно число страниц | Дна не видно |
| Подходит для | Поиск, каталоги, таблицы, архивы | Ленты, визуальные потоки |
| Футер | Доступен | Часто недостижим |
Компромисс — кнопка «Показать ещё»: контент догружается по явному клику, футер остаётся достижимым, а поисковику при этом можно отдавать классические страницы с номерами по прямым ссылкам. Для страниц поисковой выдачи и каталогов это часто удачнее сплошного скролла.
Вывод: для контента, который ищут и индексируют, дефолт — пагинация; поток без цели — скролл; середина — «Показать ещё» поверх адресуемых страниц.
SEO-нюанс: rel=»prev» и rel=»next» устарели
Долго стандартом считалась связка страниц через <link rel="prev"> и <link rel="next">. В марте 2019 года Google официально сообщил, что не использует эти теги как сигнал индексации, — и выяснилось, что не использовал их уже несколько лет. Сейчас поисковик разбирает серию страниц по обычным внутренним ссылкам между ними.
Практический вывод: не полагайтесь на rel="prev"/"next" как на SEO-инструмент. При этом удалять их, если уже стоят, смысла нет — разметку по-прежнему рекомендует W3C для доступности, а часть поисковых систем (например, Bing) её всё ещё учитывает. Что действительно важно для индексации пагинации:
- Каждая страница серии доступна по уникальному URL (
?page=2,/page/2/) и отдаёт код 200. - Между страницами есть настоящие
<a href>, а не переходы только через JS. - На страницах-номерах нет
rel="canonical", схлопывающего их в первую, — иначе робот не увидит остальные. - Контент подгружается в разметку, а не появляется исключительно после скролла.
Вывод: индексацию серии решают чистые URL и обычные ссылки, а не устаревшие мета-подсказки.
Чек-лист рабочей пагинации
- Каркас
<nav aria-label> > <ul> > <li> > <a>. - Текущая —
aria-current="page", одна на набор, со своим стилем. - Стрелки с текстовым
aria-label; неактивные —aria-disabledвне табуляции. - Видимый
:focus-visible, кликзона ≥ 40 px. - На узком экране — «окно» страниц с «…» вместо всего ряда.
- Каждая страница — свой URL и настоящая ссылка; без опоры на
rel="prev/next".
Такой блок одинаково понятен и человеку с мышью, и пользователю скринридера, и поисковому роботу — при этом почти без JavaScript.
Частые вопросы
Чем пагинация отличается от бесконечного скролла?
Пагинация делит контент на пронумерованные страницы с доступом к каждой по URL; бесконечный скролл подгружает контент по мере прокрутки без адресуемых страниц. Пагинация лучше для поиска и каталогов, скролл — для лент.
Каким тегом верстать пагинацию?
Оберните блок в <nav> с aria-label, внутри используйте список <ul>/<li> со ссылками <a>. Это даёт семантику навигации и доступность из коробки.
Как пометить текущую страницу?
Атрибутом aria-current="page" на ссылке активной страницы. По документации так помечают текущую страницу в наборе, и только один элемент набора может быть current.
Как сделать пагинацию адаптивной?
Показывайте «окно» из первой, последней, текущей и соседних страниц, а разрывы заменяйте многоточием <span>. На узких экранах прячьте дальние номера медиазапросом, оставляя стрелки и текущую.
Нужны ли rel=»prev» и rel=»next» для SEO?
Для Google — нет: с 2019 года он не использует их для индексации и разбирает серию по обычным ссылкам. Удалять существующие не обязательно — их учитывают доступность и другие поисковики.
Обязателен ли JavaScript для пагинации?
Нет. Разметка на <a href> работает с клавиатурой и индексируется без JS. Скрипт нужен лишь для динамической подгрузки без перезагрузки страницы.
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
- Где и как применять? Потестируем модель после установки на разных задачах
- Как дообучить модель под себя?
- Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
- УЧАСТВОВАТЬ ЗА 0 РУБ.
- Расскажем, как получить подписку
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
