Pagination

<nav data-pages> is a row of page links. The current page is aria-current="page"; a <span> stands in for a gap in the run.

Basic

<nav data-pages aria-label="Pages">
  <a href="?p=1">1</a>
  <a href="?p=2" aria-current="page">2</a>
  <a href="?p=3">3</a>
  <span>…</span>
  <a href="?p=12">12</a>
</nav>

The current page stays a link and is marked with aria-current="page" rather than taken out of the row.

Previous and next

<nav data-pages aria-label="Guide pages">
  <a rel="prev" href="install.html">Install</a>
  <a rel="next" href="folder-layout.html">Folder layout</a>
</nav>

rel="prev" and rel="next" turn a link into a text link with its arrow beside it. Name the page it leads to and leave the arrow to the stylesheet.

Notes

• Numbers are set with tabular figures, so the boxes stay the same width from 1 to 12.
• The current page fills with the page ink.
• A <span> between links is the ellipsis: it takes the same box with no border.
• Put the prev link first: it pushes everything after it to the far end, so a pair on its own holds one end of the row each.