Simplifying HTML markup – pagination

It's tough to argue the advantages of simplifying your HTML markup:

  • Easier for search engines to parse
  • Easier for browsers to render
  • Easier to read, validate and maintain
  • Faster load times

So we've decided to start posting comparison snippets, to show where simplifications can be made to HTML.

To kick things off, let's take a look at WordPress pagination:

<div id="nav-below" class="navigation">
  <span class="nav-previous"><a href="/page/3/" > Older Posts</a></span>
  <span class="nav-next"><a href="/page/2/" >Newer Posts</a></span>

We're not knocking this at all. It supports older browsers well, and certainly isn't heavy by any means.

But, as an example, suppose we reduced it to:

<div id="pagination">
    <a href="?offset=xxx">Next</a>
    <a href="?offset=xxx">Prev</a>

#pagination { margin-top: 1em; }
#pagination a:first-child { float: right; }

Using only a single id attribute, we can style the prev / next navigation links with pseudo-selectors, as well as eliminate the surrounding <span> tags.

Why follow me on Twitter?

  • I tweet about new technologies, services or libraries I find interesting
  • Yeah, sometimes I'll post a pet-peeve or rant about something trivial
  • If I discover something that made my web development life easier, I share it
  • I'll shout out any handy tip that I think might be useful to other devs

Tagged .

Updated: 2011-07-19

Phil LaNasa follow us in feedly