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>