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.