EspañolHTML and CSS pagination generator
Enter the total number of pages, the current one and the address format. The preview shows how the pagination looks and the code comes ready.
How to usePages 1, 2, 3 … without a plugin
Available in: 
HTML and CSS pagination generator: what it is for
Create pagination for a blog, store or results list: enter the total number of pages, the current one, how many neighbors to show and the address format, like /blog/page/{n} or ?page={n}. Choose between square, round and minimal styles and the accent color.
The code uses nav with aria-label, aria-current="page" on the current page and real a href links that Google can follow to find the items on the following pages. Each number has a 44 px touch target, and on phones the previous and next labels become just arrows.
How to use
- Enter the total number of pages and the current one.
- Choose the address, style and color.
- Copy the code to your site.
When to use it
- A blog with many posts.
- A store's product list.
- Search results.
Frequently asked questions
Why use links and not buttons?
Each page of the list needs its own address, like /blog/page/2 or ?page=2, in a regular a href link. That way Google can follow the links and find the items on the following pages, and people can open a page in another tab or share the address.
How do the ellipses work?
With many pages, the pagination shows the first, the last and a few neighbors of the current page, and puts … in place of the ones left out. You choose how many neighbors appear on each side.
Do I need rel="prev" and rel="next"?
Not for Google, which stopped using these tags in 2019. They don't hurt and other systems may still read them, so the tool adds rel to the previous and next links.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.