How to make a Pagination using HTML and CSS ?

13 Jun, 2022
Creating pagination is quite simple, you can easily do that by using Bootstrap, and JavaScript. However, in this article, we will use HTML and CSS to create pagination. 
Pagination is helpful when the website contains lots of content on a single page, and a single page will not look good with all those topics together. Few websites use the scroll to avoid pagination and vice versa. But the best looks come with the combination of scroll and pagination. As a developer, you can put a few contents on a page to make that page a little scrollable until it’s annoying. After that, you can use pagination that will leave those previous content and proceed to the new content page but the topic will be the same.
 
Creating Structure: In this section, we will just create the basic website structure of the pagination. Here, also we will attach the title attribute so the user can know what will be the content type on the next page of the pagination.
HTML code to make the structure: 
HTML
<!DOCTYPE html><html> <head>    <title>        How to make a Pagination        using HTML and CSS ?    </title></head> <body>    <center>                 <!-- Header and Slogan -->        <h1>GeeksforGeeks</h1>          <p>A Computer Science Portal for Geeks</p>          <!-- content in this Section -->        <div class="content">            <h3>Interview Experiences:</h3>             <article>                Share Your Questions/Experience or share                your "Interview Experience", please mail                your interview experience to                review-team@geeksforgeeks.org. Also, to                share interview questions, please add                questions at Contribute a Question! You                can also find company specific Interview                Questions at our PRACTICE portal !            </article>        </div>         <!-- pagination elements -->        <div class="pagination_section">            <a href="#"><< Previous</a>            <a href="#" title="Algorithm">1</a>            <a href="#" title="DataStructure">2</a>            <a href="#" title="Languages">3</a>            <a href="#" title="Interview" class="active">4</a>            <a href="#" title="practice">5</a>            <a href="#">Next >></a>        </div>     </center></body> </html>
Designing Structure: In the previous section, we have created the structure of the basic website where we are going to use CSS.
CSS code to look good the structure:
CSS
<style>   /* header styling */  h1 {    color: green;  }   /* pagination position styling */  .pagination_section {    position: relative;  }   /* pagination styling */  .pagination_section a {    color: black;    padding: 10px 18px;    text-decoration: none;  }   /* pagination hover effect on non-active */  .pagination_section a:hover:not(.active) {    background-color: #031F3B;    color: white;  }   /* pagination hover effect on active*/   a:nth-child(5) {    background-color: green;    color: white;  }   a:nth-child(1) {    font-weight: bold;  }   a:nth-child(7) {    font-weight: bold;  }   .content {    margin: 50px;    padding: 15px;    width: 700px;    height: 200px;    border: 2px solid black;  } </style>
Combining the HTML and CSS Code: This is the final code that is the combination of the above two sections. 
HTML
<!DOCTYPE html><html> <head>    <title>        How to make a Pagination        using HTML and CSS ?    </title>     <style>         /* header styling */        h1 {            color: green;        }         /* pagination position styling */        .pagination_section {            position: relative;        }         /* pagination styling */        .pagination_section a {            color: black;            padding: 10px 18px;            text-decoration: none;        }         /* pagination hover effect on non-active */        .pagination_section a:hover:not(.active) {            background-color: #031F3B;            color: white;        }         /* pagination hover effect on active*/         a:nth-child(5) {            background-color: green;            color: white;        }         a:nth-child(1) {            font-weight: bold;        }         a:nth-child(7) {            font-weight: bold;        }         .content {            margin: 50px;            padding: 15px;            width: 700px;            height: 200px;            border: 2px solid black;        }    </style></head> <body>    <center>                 <!-- Header and Slogan -->        <h1>GeeksforGeeks</h1>          <p>A Computer Science Portal for Geeks</p>          <!-- content in this Section -->        <div class="content">            <h3>Interview Experiences:</h3>             <article>                Share Your Questions/Experience or share                your "Interview Experience", please mail                your interview experience to                review-team@geeksforgeeks.org. Also, to                share interview questions, please add                questions at Contribute a Question! You                can also find company specific Interview                Questions at our PRACTICE portal !            </article>        </div>         <!-- pagination elements -->        <div class="pagination_section">            <a href="#"><< Previous</a>            <a href="#" title="Algorithm">1</a>            <a href="#" title="DataStructure">2</a>            <a href="#" title="Languages">3</a>            <a href="#" title="Interview" class="active">4</a>            <a href="#" title="practice">5</a>            <a href="#">Next >></a>        </div>     </center></body> </html>
Output: 
 
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
arorakashish0911
sanjyotpanure
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property