Creating Pagination Links

To create pagination links in HTML, use a list (ul) within a nav element and style the links with CSS.

Pagination links are used to divide a large amount of content across multiple pages, allowing users to jump back and forth between them. It is a common pattern for search results, blogs, and product listings.

The HTML Structure

Each page number or arrow in your pagination should be a link within a list item:

Using aria-label="Page navigation" on the nav element helps screen readers identify this section as the page-to-page navigation area.

Styling the Links

To make the list horizontal, set the display property to flex on the ul element. You can then style the links to have a border, padding, and a hover effect to make them look like buttons:

Full Working Example

In the following example, we have styled the pagination links with rounded corners and a smooth hover transition:

<!DOCTYPE html>
<html>
<head>
<title>Pagination Links Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
  }
  .pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .pagination li {
    margin: 0 5px;
  }
  .pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .pagination a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
  }
  .pagination a:hover:not(.active) {
    background-color: #ddd;
  }
</style>
</head>
<body>

<h2>Simple Pagination</h2>
<p>Click on the page numbers to see the hover effect. The green button represents the current page.</p>

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li><a href="#">&laquo; Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" class="active">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next &raquo;</a></li>
  </ul>
</nav>

</body>
</html>

View Output Full Screen Preview

The Active State

It's important to indicate to the user which page they are currently on. In the example above, we added an active class to the current page number and gave it a distinct background color. You can also use aria-current="page" on the active link to further assist screen reader users.