Semantic Pagination HTML5

paginator.html

<nav class="paginator" role="toolbar">
  <ul class="goto-pages">
    <li class="goto-search">
      <a href="#search" class="search-pages" title="Toggle Advanced Search">&#8981;</a>
    </li>
    <li class="goto-page">
      <a href="/admin/users?page=1" aria-disabled="true" class="first-page disabled" data-page="1" rel="first" title="Go to the first page">&#8676;</a>
    </li>
    <li class="goto-page">
      <a href="/admin/users?page=1" aria-disabled="true" class="prev-page disabled" data-page="1" rel="prev" title="Go to page 1">&#8672;</a>
    </li>
    <li aria-valuemax="109" aria-valuemin="1" aria-valuetext="1" class="goto-page current-page" role="spinbutton">
      <span>Page</span>
      <input class="current-page-input" value="1">
      <span>of</span>
      <span class="page-count">109</span>
    </li>
    <li class="goto-page">
      <a href="/admin/users?page=2" aria-disabled="false" class="next-page yes" data-page="2" rel="next" title="Go to page 2">&#8674;</a>
    </li>
    <li class="goto-page">
      <a href="/admin/users?page=109" aria-disabled="false" class="last-page yes" data-page="109" rel="last" title="Go to the last page">&#8677;</a>
    </li>
  </ul>
  <output class="record-count">
    <span>Viewing</span>
    <span class="current-record-range">1 - 20</span>
    <span>of</span>
    <span class="total-record-count">2178</span>
  </output>
</nav>