Semantically Correct CSS Pagination

Here I show a method for generating pagination for search results and long list pages using semantically correct HTML and CSS.

Pagination as HTML Markup

I've modeled pagination as an un-ordered list of links. There are three class declarations so that I can identify the list "pagination" and the first and last items, "leader" and "last" respectively.

This markup is fairly straight forward to generate on the fly, but note that you'll need the total count of items so that you can generate the Page 1 of COUNT.

This markup is a lot easier to generate that similar markup built with tables.

The CSS To Style The Pagination

Posted on Monday, Mar 6, 2006