我可以使用 <nav> 标签进行分页吗?

问题描述 投票:0回答:3

在主菜单导航中看到标签

<nav>
的使用很常见,但我不知道其他可以使用它的示例。例如,对于分页:

<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
3个回答
12
投票

是的。

HTML5 规范定义了

nav
元素,如下所示:

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>
    

3
投票

有趣的问题。

根据官方的W3草案,似乎

nav
确实适合用作分页容器,特别是如果它用于主要导航(即整个页面是一个可以分页的结果集)

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


0
投票

取决于您如何使用分页。如果您是为了搜索结果而执行此操作,并且单击页面链接会将用户带到新的网址,那么可以。如果点击页面按钮会触发搜索结果内容的刷新,则不会。

导航元素旨在帮助用户找到其他页面的链接,而不是小部件的一组按钮控件。

© www.soinside.com 2019 - 2024. All rights reserved.