寻呼机上一个/下一个语义

Question

以下是我的评论分页代码.

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

我的问题是如果我在评论的第一页(并且隐藏了较旧的评论链接),则在DOM中显示空列表项.

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

我应该以语义方式删除空列表项(1)或将其留空(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>

哪个选项以语义方式正确？

Answer 1

我有一个更好的建议使用禁用状态:

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

尝试2

如果你完全摆脱CSS,我还有另一个想法.<a>您可以使用<button>或者<input type="button" />,甚至在Facebook中使用相同的东西,而不是标签.因此,您可以将<button>标记设置为看起来像<a>标记并指定禁用状态,因为即使禁用了JavaScript和CSS,它也能正常工作.

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

造型<button>为<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>

以上代码适用于所有浏览器,包括Internet Explorer! :)