Генератор постраничной навигации на HTML и CSS

Генератор постраничной навигации на HTML и CSS: для чего нужен

Создайте постраничную навигацию для блога, магазина или списка результатов: укажите общее число страниц, текущую, сколько соседних показывать и формат адреса, например /blog/page/{n} или ?page={n}. Выберите стиль — квадратный, круглый или минималистичный — и акцентный цвет.

В коде используется nav с aria-label, aria-current=page на текущей странице и настоящие ссылки a href, по которым поисковик может переходить, чтобы найти элементы на следующих страницах. У каждого номера область касания 44 px, а на телефоне тексты «назад» и «вперёд» превращаются в одни стрелки.

Как пользоваться

1. Укажите общее число страниц и текущую.
2. Выберите адрес, стиль и цвет.
3. Скопируйте код на сайт.

Когда использовать

• Блог с большим числом постов.
• Список товаров магазина.
• Результаты поиска.

Частые вопросы

Почему ссылки, а не кнопки?

У каждой страницы списка должен быть свой адрес, например /blog/page/2 или ?page=2, в обычной ссылке a href. Так поисковик может переходить по ссылкам и находить элементы на следующих страницах, а человек — открыть страницу в другой вкладке или поделиться адресом.

Как работает многоточие?

При большом числе страниц навигация показывает первую, последнюю и несколько соседних с текущей, а вместо остальных ставит …. Вы выбираете, сколько соседних страниц показывать с каждой стороны.

Нужно ли добавлять rel=prev и rel=next?

Для Google — нет, он перестал использовать эти разметки в 2019 году. Они не мешают, а другие системы могут их читать, поэтому инструмент добавляет rel в ссылки «назад» и «вперёд».

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты