什么 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 进行分页可能不是正确的元素。但是，如果在aside 中使用nav 可能是正确的，如果它是那个 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。它包括下一个、上一个等的链接关系类型。

编辑： 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>

这有点帮助