Нумерация страниц при использовании списка в html

Question

Я пытаюсь использовать список, а не таблицы в html. Я хочу разбить свои данные на страницы, но не могу понять, как я могу это сделать при использовании списка в html. Когда я нажимаю 2,3,4 et c до go до следующего. вот мой код

ul li{
    float:left;
    padding:2px;
}
ul li:nth-child(5n){
}
ul li:nth-child(5n+1){
    clear:both;
}
ul li:nth-child(-n+5){
    border-top:1px solid #000;
}
#myUL {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#myUL li a {
    border: 1px solid #ddd;
    display: block;
}
.pagination li {
    display:inline-block;
    padding:5px;
}

<ul id="myUL">                             
    <li><a  class="name"href="#">Adele</a></li>
    <li><a class="name" href="#">Agnes</a></li>
    <li><a class="name" href="#">Billy</a></li>
    <li><a class="name" href="#">Bob</a></li>
    <li><a class="name" href="#">Billy</a></li>
    <li><a class="name" href="#">Billy</a></li>
    <li><a class="name" href="#">Bob</a></li>
    <li><a class="name" href="#">Calvin</a></li>
    <li><a class="name" href="#">Christina</a></li>
    <li><a class="name" href="#">Cindy</a></li>
</ul>
<div class="pagination"> 
    <a href="#">«</a> 
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">»</a> 
</div>