Responsive pagination
Help people move through a multi-page list with a compact, keyboard-friendly pagination control.
Open folder
Help people move through a multi-page list with a compact, keyboard-friendly pagination control.
Create a beginner-friendly responsive pagination control using semantic HTML and dependency-free CSS. Use a nav labelled Pagination with an unordered list of links for Previous page, pages 1 through 4, and Next page. Mark page 2 as the current page with aria-current="page" and make the current state understandable without color alone. Use real href values, visible keyboard focus styles, touch-friendly link padding, and flex wrapping so the control stays usable at 320px without horizontal overflow. Use scoped classes, system fonts, no JavaScript, frameworks, external assets, animations, or transitions. Return complete copy-ready HTML and CSS and explain the nav landmark, current-page marker, and wrapping behavior for a beginner.