什么HTML 5标签最适合分页容器？

Question

我有一个div，其中只有与分页相关的内容。什么是最好的元素/标签使用？

我调查了<nav>，但它并不适合，因为分页不是主要的导航。

<div class="paginationBar">
    <button class="previous">Previous</button>
          <button>1</button>
          <button>2</button>
          <button>3</button>
    <button class="next">Next</button>
</div>

对我而言，外部div似乎可以放在一边，因为它与主要部分相关并且在文章元素之外。

非常欢迎任何其他改进/修复我的代码的建议。

Answer 1

nav 是正确的容器，如果分页是导航祖先分区元素（而不是整个页面！）内容的主要方式。请参阅my answer (to a similar question) with some examples。

使用aside进行分页可能不是正确的元素。但是，在nav内使用aside可能是正确的，如果它是 aside内容的主要导航。

您应该使用a代替button，因为分页（顾名思义）会导致不同的页 / URL。然后，您可以使用rel值next和prev作为相应的分页链接。如果您坚持使用button但仍有单独的网页，则可以使用link元素提供这些rel值。

Answer 2

我认为你根本不需要那个元素。你的按钮属于一起，应该保持在一起，比如

<div class="paginationBar">
    <button class="previous">Previous</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="next">Next</button>
</div>

将动态按钮插入到后端或前端（例如jQuery的.insertAfter()）非常容易。

---

如果你不需要支持一些旧的IE，你也可以删除你的按钮上的课程，并使用:first-child - :last-child来设置那些：

<div class="paginationBar">
    <button>Previous</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>Next</button>
</div>

---

<强>更新

谈论按钮容器时，最合适的标签可能是<nav>。

  

<nav>

的其他可能用途      

  
1. 目录
  
2. 上一个/下一个按钮（或分页）
  
3. 搜索表单
  
4. 面包屑
  

SOURCE

Answer 3

正如其他人所指出的，最好的方法是将<nav>与锚标签一起使用。以下是5页的示例，其中当前页码为3：

<nav>
  <ul class="pagination">
    <li><a href="?page=1" rel="first">First</a></li>
    <li><a href="?page=2" rel="prev">Previous</a></li>

    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li class="active"><a href="?page=3">3</a></li>
    <li><a href="?page=4">4</a></li>
    <li><a href="?page=5">5</a></li>

    <li><a href="?page=4" rel="next">Next</a></li>
    <li><a href="?page=5" rel="last">Last</a></li>
  </ul>
</nav>

锚标记之所以如此重要，是因为rel属性使您的网页可以抓取。

另请注意，如果您的环境已加载bootstrap.css，则会自动识别pagination和active CSS类。在未加载bootstrap.css的情况下，您应该为这些类提供自己的样式作为后备。结果应如下所示：

现在，您可以使用JavaScript截取<a>元素的click事件，并使用您喜欢的任何技术获取下一页。

Answer 4

请查看XHTML Vocabulary。它包括next，prev等的链接关系类型。

修改： link relation types in HTML 5

Answer 5

<ol class="paginationBar">
    <li><button class="previous">Previous</button></li>
          <li><button>1</button></li>
          <li><button>2</button></li>
          <li><button>3</button></li>
    <li><button class="next">Next</button></li>
</ol>

这有点帮助