我可以使用 <nav> 标签进行分页吗？答案

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

在主菜单导航中看到标签<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

【解决方案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>

【讨论】：