{"id":312,"date":"2011-07-19T11:19:00","date_gmt":"2011-07-19T11:19:00","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=312"},"modified":"2011-07-19T11:19:00","modified_gmt":"2011-07-19T11:19:00","slug":"simplifying-html-markup-pagination","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/simplifying-html-markup-pagination\/","title":{"rendered":"Simplifying HTML markup &#8211; pagination"},"content":{"rendered":"<p>It&#39;s tough to argue the advantages of simplifying your HTML markup:<\/p>\n<ul>\n<li>Easier for search engines to parse<\/li>\n<li>Easier for browsers to render<\/li>\n<li>Easier to read, validate and maintain<\/li>\n<li>Faster load times<\/li>\n<\/ul>\n<p>So we&#39;ve decided to start posting comparison snippets, to show where simplifications can be made to HTML.<\/p>\n<p>To kick things off, let&#39;s take a look at WordPress pagination:<\/p>\n<pre id=\"line233\">&lt;<span class=\"start-tag\">div<\/span><span class=\"attribute-name\"> id<\/span>=<span class=\"attribute-value\">&quot;nav-below&quot; <\/span><span class=\"attribute-name\">class<\/span>=<span class=\"attribute-value\">&quot;navigation&quot;<\/span>&gt;\r\n  &lt;<span class=\"start-tag\">span<\/span><span class=\"attribute-name\"> class<\/span>=<span class=\"attribute-value\">&quot;nav-previous&quot;<\/span>&gt;&lt;<span class=\"start-tag\">a<\/span><span class=\"attribute-name\"> href<\/span><span>=&quot;<\/span>\/page\/3\/<span>&quot; <\/span>&gt; Older Posts&lt;\/<span class=\"end-tag\">a<\/span>&gt;&lt;\/<span class=\"end-tag\">span<\/span>&gt;\r\n  &lt;<span class=\"start-tag\">span<\/span><span class=\"attribute-name\"> class<\/span>=<span class=\"attribute-value\">&quot;nav-next&quot;<\/span>&gt;&lt;<span class=\"start-tag\">a<\/span><span class=\"attribute-name\"> href<\/span><span>=&quot;<\/span>\/page\/2\/<span>&quot; <\/span>&gt;Newer Posts&lt;\/<span class=\"end-tag\">a<\/span>&gt;&lt;\/<span class=\"end-tag\">span<\/span>&gt;\r\n&lt;\/<span class=\"end-tag\">div<\/span>&gt;<\/pre>\n<p>We&#39;re not knocking this at all. It supports older browsers well, and certainly isn&#39;t heavy by any means.<\/p>\n<p>But, as an example, suppose we reduced it to:<\/p>\n<p><code><br \/>\n\t&lt;div id=&quot;pagination&quot;&gt;<br \/>\n\t&nbsp;&nbsp;&nbsp; &lt;a href=&quot;?offset=xxx&quot;&gt;Next&lt;\/a&gt;<br \/>\n\t&nbsp;&nbsp;&nbsp; &lt;a href=&quot;?offset=xxx&quot;&gt;Prev&lt;\/a&gt;<br \/>\n\t&lt;\/div&gt;<br \/>\n\t<\/code><\/p>\n<p><code>#pagination { margin-top: 1em; }<br \/>\n\t#pagination a:first-child { float: right; }<br \/>\n\t<\/code><\/p>\n<p>Using only a single id attribute, we can style the prev \/ next navigation links with pseudo-selectors, as well as eliminate the surrounding &lt;span&gt; tags.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#39;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,&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[14],"tags":[106],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/312"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=312"}],"version-history":[{"count":0,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/312\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}