Pager previous / next semantics

Question

The following is my code for comments pagination.

<ul class="pager">
  <li class="previous">
    <a href="#">Older Comments &larr;</a>
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

My problem is if I'm on the first page of comments (and older comments link is hidden), an empty list item is displayed in the DOM.

<li class="previous">
</li>
<li class="next">
  <a href="#">Newer Comments &rarr;</a>
</li>

In a semantic way should I remove the empty list item (1) or leave it there empty (2)?

1/

<ul class="pager">
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

2/

<ul class="pager">
  <li class="previous">
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

Which option is correct in a semantic way?

Answer 1

I have a better suggestion to use a disabled state:

<ul class="pager">
  <li class="previous">
    <a href="#" class="disabled">Older Comments &larr;</a>
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

---

Attempt 2

Also I have another idea, if you are completely getting rid of CSS. Instead of <a> tags, you can use <button> or <input type="button" />, as even in Facebook, the same thing is used. So, you can style the <button> tag to look like <a> tag and give a disabled state, as this works even when both JavaScript and CSS is disabled.

<ul class="pager">
  <li class="previous">
    <button disabled="disabled">Older Comments &larr;</button>
  </li>
  <li class="next">
    <button>Newer Comments &rarr;</button>
  </li>
</ul>

For styling <button> as <a>:

/* Just for this demo */
ul, li {margin: 0; padding: 0; list-style: none; display: inline-block;}

button {border: none; background: none; color: #00f; text-decoration: underline; cursor: pointer;}
button:disabled {color: #999; cursor: default;}

<ul class="pager">
  <li class="previous">
    <button disabled="disabled">Older Comments &larr;</button>
  </li>
  <li class="next">
    <button>Newer Comments &rarr;</button>
  </li>
</ul>

The above code works in all browsers, including Internet Explorer! :)

Answer 2

here's short and sweet.. :)

<style type="text/css">
a.disabled {
   pointer-events: none;
   cursor: default;
   color:#999;
}
</style>
<ul class="pager">
  <li class="previous">
    <a class="disabled" href="#">Older Comments &larr;</a>
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

GOOD LUCK!