【问题标题】:What HTML 5 tag is best suited for pagination container?什么 HTML 5 标签最适合分页容器?
【发布时间】:2012-12-11 18:38:22
【问题描述】:

我有一个 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 似乎可以放在一边,因为它与主要部分相关并且在文章元素之外。

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

【问题讨论】:

  • 好吧,在我个人看来,除非这个分页内容不是主要内容,否则&lt;nav/&gt; 首选...还有链接而不是按钮,还有没有理由使用 someElement,因为您可以使用基本 javascript 在节点之间的任何位置添加节点...

标签: html semantic-web semantic-markup


【解决方案1】:

nav 正确的容器,如果分页是导航该 祖先分段元素(不是整个页面!)中的内容的主要方式。见my answer (to a similar question) with some examples

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

您应该使用a 而不是button,因为分页(顾名思义)会导致不同的页面/URL。然后,您可以将 relnextprev 用于相应的分页链接。如果您坚持使用button,但仍然有单独的页面,则可以使用link 元素来提供这些rel 值。

【讨论】:

  • 不使用链接有什么坏处?问题是我没有提供href 的网址,所以我看不到重点。都是 ajax/jquery,因为我在查询中使用了很多过滤器/参数,如果我尝试生成 url,可能会有数百万个 url 组合......
  • 好吧,如果您所有的“页面”都在同一个 URL 上,那么没有 JS 的访问者以及所有搜索引擎机器人都无法访问/链接/书签/抓取其他“页面”。所以你的选择(button而不是a)是正确的(所以你不能使用relprev/next)。
【解决方案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>

更新

说到按钮容器,最合适的标签大概是&lt;nav&gt;

&lt;nav&gt;的其他可能用途

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

SOURCE

【讨论】:

  • 您在 insertAfter() 中非常正确,q 已编辑。我不需要对旧浏览器的支持,所以这没问题。我放入按钮的原因是因为它们不会链接到任何 url(而不是 js 函数)。无论如何,元素也会被jquery ui转换成按钮......
  • 我的问题更多是关于第一个 div 以及放在一边是否在语义上更正确?
  • @DominicM 我明白了.. 更新了答案
  • 我想这里确实没有正确的答案,但我想我会选择 nav,因为我在任何页面上都只会多 1 个 nav...谢谢。
  • 这是一个不错的article,关于为什么不把语义看得太重要。当然,拥有它很好,但如果您拥有 &lt;div&gt; 而不是 &lt;aside&gt;,则不会发生任何灾难性的事情
【解决方案3】:

正如其他人指出的那样,最好的方法是将&lt;nav&gt; 与锚标签一起使用。这是一个有 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,那么它将自动识别 paginationactive CSS 类。您应该为这些类提供自己的样式作为备用,以防bootstrap.css 未加载。结果应如下所示:

现在您可以使用 JavaScript 拦截 &lt;a&gt; 元素的 click 事件并使用您喜欢的任何技术获取下一页。

【讨论】:

    【解决方案4】:

    请查看XHTML Vocabulary。它包括下一个、上一个等的链接关系类型。

    编辑: link relation types in HTML 5

    【讨论】:

    • XHTML 与我的问题有什么关系?
    • 抱歉,您问的是“什么是最好的元素/标签?”并且您要求使用语义标记来识别下一页进行分页。所以请重新考虑我的答案!只是一个小提示:HTML 本身仅用于结构而不是语义!
    • 问题是关于 HTML5 而不是 XHTML。即使您更新的链接与问题无关。它没有提到分页。
    • 是的,但我没有使用链接,我使用了按钮。还有一个问题是什么元素最适合分页容器(答案是导航)。
    【解决方案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>
    

    这有点帮助

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-08-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-06-30
      相关资源
      最近更新 更多