【问题标题】:Can I use the <nav> tag for pagination?我可以使用 <nav> 标签进行分页吗?
【发布时间】:2023-04-10 22:59:01
【问题描述】:

在主菜单导航中看到标签&lt;nav&gt; 的用法很常见,但我不知道在哪里可以使用它的其他示例。例如,对于分页:

<div class='my-pagination'>
   <!-- first, 2, 3, 4 ... 8, 9, last -->
</div>

可以是:

<nav class='my-pagination'>
  <!-- first, 2, 3, 4 ... 8, 9, last -->
</nav>

它是语义的吗?

【问题讨论】:

    标签: html pagination semantic-markup


    【解决方案1】:

    有趣的问题。

    根据官方W3 Draft 看来nav 确实适合用作分页容器,特别是如果它用于主要导航(即整个页面是可以分页的结果集) )

    并非页面上的所有链接组都需要位于导航元素中——该元素主要用于由主要导航块组成的部分。特别是,页脚通常有一个指向站点各个页面的链接的简短列表,例如服务条款、主页和版权页面。对于这种情况,仅页脚元素就足够了;虽然在这种情况下可以使用 nav 元素,但通常没有必要。

    【讨论】:

    • 嗯...如果您的分页正在通过作为页面上主要数据的结果集进行分页,则为“是”。
    【解决方案2】:

    是的。

    HTML5 规范定义 nav element 如下:

    nav 元素表示页面的一部分,该部分链接到其他页面或页面内的部分:带有导航链接的部分。

    分页显然由“指向其他页面的链接”组成,这些是“导航链接”。在大多数情况下,为此使用分段内容元素是有意义的。


    确保将nav 放在正确的父部分中:

    • 如果是多页文章,nav 应该是article 的子代。

      <article>
        <h1>Review of my new camera</h1>
        <p>…</p>
        <nav><!-- pagination for this article --></nav>
      </article>
      
    • 如果它是一个多页的文章预告列表,nav 应该是包含此列表的部分的子部分。

      <section>
        <h1>All blog posts</h1>
        <article><h1>Review of my new camera</h1></article>
        <article><h1>I want to buy a camera, any suggestions?</h1></article>
        <nav><!-- pagination for this blog posts list --></nav>
      </section>
      
    • 如果是每页一篇完整的文章,nav 应该是 body 分区根的子级。

      <body>
        <article><h1>Review of my new camera</h1></article>
        <nav><!-- pagination for next/previous article --></nav>
      </body>
      

    【讨论】:

      猜你喜欢
      • 2015-10-04
      • 1970-01-01
      • 1970-01-01
      • 2013-03-06
      • 2022-01-14
      • 2021-09-24
      • 1970-01-01
      • 1970-01-01
      • 2011-10-21
      相关资源
      最近更新 更多