HtmlHow-ToBeginner · 4 min read

How to Create Pagination in HTML: Simple Guide with Example

To create pagination in HTML, use a series of linked <a> tags or buttons representing page numbers. Wrap them in a container like <nav> or <ul> for structure and style them with CSS for clarity and usability.

📐

Syntax

Pagination in HTML is usually a list of page links inside a container. Each page number is a clickable <a> tag. You can use <nav> for semantic meaning and <ul> with <li> for structure.

<nav>: Defines navigation section.
<ul>: Holds list of pages.
<li>: Each page item.
<a>: Link to a page.

html

<nav aria-label="Page navigation">
  <ul>
    <li><a href="#page1">1</a></li>
    <li><a href="#page2">2</a></li>
    <li><a href="#page3">3</a></li>
  </ul>
</nav>

Output

A horizontal list of page numbers 1 2 3 as clickable links

💻

Example

This example shows a simple pagination bar with previous, numbered pages, and next buttons. It uses semantic HTML and basic CSS for layout and style.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Pagination</title>
<style>
  nav.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-family: Arial, sans-serif;
  }
  nav.pagination a {
    padding: 0.5rem 0.8rem;
    text-decoration: none;
    color: #007bff;
    border: 1px solid #ddd;
    border-radius: 0.3rem;
  }
  nav.pagination a:hover {
    background-color: #e9ecef;
  }
  nav.pagination a[aria-current="page"] {
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    pointer-events: none;
  }
</style>
</head>
<body>
<nav class="pagination" aria-label="Page navigation">
  <a href="#prev" aria-label="Previous page">&laquo; Prev</a>
  <a href="#page1" aria-current="page">1</a>
  <a href="#page2">2</a>
  <a href="#page3">3</a>
  <a href="#page4">4</a>
  <a href="#next" aria-label="Next page">Next &raquo;</a>
</nav>
</body>
</html>

Output

A horizontal pagination bar with Prev, pages 1 to 4, and Next links; page 1 is highlighted as current

⚠️

Common Pitfalls

Common mistakes when creating pagination include:

Not using semantic elements like <nav> or aria-label for accessibility.
Using plain text instead of links, which breaks navigation.
Not indicating the current page visually or with aria-current.
Forgetting to style pagination for clarity and usability.

Always ensure pagination is keyboard accessible and screen reader friendly.

html

<!-- Wrong: No links, no semantic tags -->
<div>1 2 3 4</div>

<!-- Right: Use links and nav with aria-label -->
<nav aria-label="Page navigation">
  <a href="#page1" aria-current="page">1</a>
  <a href="#page2">2</a>
  <a href="#page3">3</a>
  <a href="#page4">4</a>
</nav>

📊

Quick Reference

Tips for creating good pagination:

Wrap page links in a <nav> with aria-label="Page navigation".
Use <a> tags for clickable pages.
Mark the current page with aria-current="page" and style it distinctly.
Include Previous and Next links for easier navigation.
Use CSS Flexbox to arrange pagination horizontally and add spacing.

✅

Key Takeaways

Use semantic <nav> and <a> tags for accessible pagination.

Highlight the current page with aria-current="page" and distinct styles.

Include Previous and Next links for better user navigation.

Style pagination with CSS Flexbox for a clean horizontal layout.

Avoid plain text pagination; always use links for usability and accessibility.