Creating Pagination with HTML and CSS

Follow us on LinkedIn for our latest data and tips!

, ,

Creating Pagination with HTML and CSS

When users need to navigate from page to page, pagination is the best method to use. It lets users click through a number of associated pages. Pagination is an important function for a smooth user interface. Pages may have become longer, but the need to seamlessly transition from one page to another is still there.

The basis for pagination is the ability to switch through pages that are not already pre-configured. It serves as an easier way to make the navigation flow. Users on a website should be able to see where they are, where they’ve been and where they’re going.

Implementing Pagination

There are a few fundamental methods to learn in order to create a pagination. The following syntax is the basis for implementation. The first order of business is to add the .pagination class to start. It needs to be written with a UL HTML element as well. There are two more elements to add that will assist in making the user interface seamless. An arrow created through the .arrow class will go before the first number in the list and the last. Adding the arrow allows for users the chance to click ahead just one page at a time, while also giving them the option to choose an individual page.

The final caveat to the UI is to add the .unavailable class to one of the list items. This is to make one part of the list unable to be clicked. A reason for this would be to make the first arrow key unavailable when you’re on page one. Here is the HTML and subsequent CSS styling code examples for reference.

<ul class="pagination">
  <li class="arrow unavailable"><a href="">&lbarr;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li class="arrow"><a href="">&rbarr;</a></li>

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;


The arrows can be replaced with any user element the developer wants. The standard is going to be a left arrow to start and a right arrow at the end of the list. There’s the possibility of adding an ellipsis in the middle to show something like: 1. 2. 3. … 7. 8. 9. The code for that would be an additional <li> element with an .unavailable in front of the code so it can’t be clicked.

There are a few guidelines developers should follow, so that users aren’t confused and the interface stays in line with good design practices. The page numbers or arrows always should be prevalent and large enough to be clicked. Try to avoid using underlines and make sure that the user can identify the current page they’re on. The style sheet should account for spacing between numbers linking to the next page. Previous and next arrows are a good practice to include, no matter how many pages are on the website. Overall, proper pagination practices will make for smoother user experiences on any web project.