âš¡IntermediateStructured Data and SEO
Pagination HTML
Build accessible pagination with nav, aria-label, aria-current, and proper link semantics.
Overview
Pagination divides content across multiple pages. A well-implemented pagination component needs to work for three audiences:
1. Sighted users: clear current-page indication, disabled state on first/last, clear navigation
2. Keyboard/screen reader users: meaningful link text, aria-current="page", aria-label on nav
3. Search engines: proper link structure so crawlers follow page links
Note: The rel="prev" and rel="next" link hints were deprecated by Google in 2019 Google now follows pagination links naturally. However, they are still supported by other crawlers and remain a best practice.
Key Points
- •Wrap pagination in <nav aria-label="Pagination"> for landmark navigation
- •aria-current="page" on the current page link/button
- •Disabled prev/first and next/last should not be links use <span> with aria-disabled="true"
- •Meaningful link text: "Page 3" not "3", "Next page" not "next"
- •aria-label="Go to page 5" on numbered buttons provides full context
- •rel="prev" and rel="next" are deprecated for Google but still useful for other crawlers
Examples
Accessible pagination component
<nav aria-label="Blog post pages">
<ul class="pagination">
<!-- Previous (disabled on page 1) -->
<li>
<a href="/blog?page=2" rel="prev" aria-label="Previous page">Previous</a>
</li>
<!-- Page numbers -->
<li>
<a href="/blog?page=1" aria-label="Page 1">1</a>
</li>
<li>
<a href="/blog?page=2" aria-label="Page 2">2</a>
</li>
<li>
<!-- Current page: not a link, marked with aria-current -->
<span aria-current="page" aria-label="Page 3, current page">3</span>
</li>
<li>
<a href="/blog?page=4" aria-label="Page 4">4</a>
</li>
<!-- Next -->
<li>
<a href="/blog?page=4" rel="next" aria-label="Next page">Next</a>
</li>
</ul>
</nav>Disabled state for first/last page
<!-- On page 1: Previous is disabled -->
<nav aria-label="Pagination">
<ul>
<!-- Not a link disabled visually and semantically -->
<li>
<span class="disabled" aria-disabled="true">Previous</span>
</li>
<li>
<span aria-current="page">1</span>
</li>
<li>
<a href="/page/2">2</a>
</li>
<li>
<a href="/page/2" rel="next">Next</a>
</li>
</ul>
</nav>Use <span> with aria-disabled instead of a disabled <a> tag disabled attribute doesn't exist on <a>.
Ellipsis pattern for large page counts
<nav aria-label="Pagination">
<ul>
<li><a href="/page/1">1</a></li>
<li><a href="/page/2">2</a></li>
<li><span aria-hidden="true">…</span></li>
<li><span aria-current="page">10</span></li>
<li><span aria-hidden="true">…</span></li>
<li><a href="/page/20">20</a></li>
</ul>
</nav>Ellipsis characters are decorative aria-hidden="true" prevents screen readers from reading "…".
Common Mistakes
- Making the current page a link users would click to reload the same page
- Using just numbers for link text ("1", "2", "3") screen readers need "Page 1", "Page 2" context
- Disabling prev/next with a <a href="#"> use <span> to remove from tab order
Note
Consider "load more" infinite scroll as an alternative to traditional pagination for long lists it can offer better UX on mobile and avoids the problem of broken pagination state on reload.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4