Standard - list

<ul> + <li> + <a>

active class is available for both of `li` and `li a`.

<ul class="pagination">
  <li class="item"><a href="#">1</a></li>
  <li class="item active"><a href="#">2</a></li>
  <li class="item"><a href="#">3</a></li>
  <li class="item">...</li>
  <li class="item"><a href="#">9</a></li>
</ul>

<ul class="pagination">
  <li class="item"><a href="#">« Older</a></li>
  <li class="item"><a href="#">Newer »</a></li>
</ul>

Standard - div

<div> + <span> + <a>

active class is available for both of `span` and `span a`.

<div class="pagination">
  <span class="item"><a href="#">1</a></span>
  <span class="item"><a class="item" href="#">2</a></span>
  <span class="item"><a href="#">3</a></span>
  ...
<div class="pagination">
  <span class="item"><a href="#"><</a></span>
  <span class="item"><a href="#">></a></span>
</ul>

Simple

<div> + <a>

<div class="pagination">
  <a class="item" href="#">1</a>
  <a class="item active" href="#">2</a>
  <a class="item" href="#">2</a>
  ...
</div>

Simple Rounded

<div> + <a>

<div class="rounded pagination">
  <a class="item" href="#">1</a>
  <a class="item active" href="#">2</a>
  <a class="item" href="#">2</a>
  ...
</div>