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

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

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

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

解决方法

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

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

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