HTML Pagination

by Salitha Chathuranga July 16, 2017 0 Comments

What is pagination? When you are browsing for web pages, you will see a page menu in the bottom part of the page. It includes the page numbers of you are currently having. Except those numbers there are another clickable items for next page and previous page. This whole page menu is called as pagination. You can navigate to the relevant pages by using this section. Here I will explain you a simple pagination including 3 pages. All these pages are included with a common stylesheet(css file).
Look at the below screenshots. It's the sample that I'm doing here with you.



  • First create 3 html pages called page1, page2, page3 and a css file called style.
  • Normally a pagination is built up with a <ul> tag followed by <a> tags and <li> tags. As you know ul tag is making a list and li tags making list items. The anchor tags  are used to include the  pages into the list. As an example I'll show now the pagination of fist page.

<ul class="pagination">
<li><a href="#"><<</a></li>
<li><a href="#" class="active">1</a></li>
<li><a href="page2.html">2</a></li>
<li><a href="page3.html">3</a></li>
<li><a href="page2.html">>></a></li>
</ul>
  • Let's start the explaination.
  • Here I have given a class called pagination to the unordered list(ul). It is used to add styles to the pagination using the stylesheet.
  • There's a class called active. What does it mean? It indicates the page that a user is currently visiting. When you are in first page, the active  page is the page with number 1 according to the order. We can use this class when we want to add styles to the active pages.
  • # sign is used to indicate the same page. << sign shows the previous page and >> shows the next page according to a particular page. When we are in page 1, there should be # sign in the href attribute of the link of first page and also previous page, since there are no pages before it. According to the order we can insert the links to the anchor tags of next pages.  According to the page, pagination is different. I'll put here the codes for page2 and page3 also. Look at them and study the difference!
  • Page2

<ul class="pagination">
<li><a href="page1.html"><<</a></li>
<li><a href="page1.html">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="page3.html">3</a></li>
<li><a href="page3.html">>></a></li>
</ul>
  • Page3
<ul class="pagination">
<li><a href="page2.html"><<</a></li>
<li><a href="page1.html">1</a></li>
<li><a href="page2.html">2</a></li>
<li><a href="#" class="active">3</a></li>
<li><a href="#">>></a></li>
</ul>

  • Include the pagination in each page when you want to navigate through a set of pages.
  • Style the numbers well to identify the active page and the other pages. Refer the stylesheet included in the code files.
  • If you want to download the full source visit here to access to my Github account.

0 Comments