什么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 如果分页是导航该祖先分区元素(而不是整个页面!)内容的主要方式,则它是正确的容器.通过一些例子看我的答案(对于类似的问题).

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

在后端或前端(.insertAfter()例如jQuery )上插入动态按钮非常容易

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

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

UPDATE

谈论按钮容器,最合适的标签可能是<nav>.

其他可能的用途 <nav>

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

资源