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>
</div>

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>
</div>

#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.

Subscribe

  • follow us in feedly


Tagged .

Updated: 2011-07-19

Phil LaNasa