每个文章元素都可以有自己的导航吗？

Question

我正在考虑这种首页布局，其中“主导航”遍布整个页面，显示每个类别的最新文章，如下所示：

<article>
    <nav><a href="/elephants">Elephants</a></nav>
    <h2><a href="/elephants/borneo.htm">The Borneo Elephant</a></h2>
<p>...</p>
</article>
<article>
    <nav><a href="/hippos">Hippos</a></nav>
    <h2><a href="/hippos/malgasy.htm">The Malgasy Hippo</a></h2>
<p>...</p>
</article>
<article>
    <nav><a href="/rhinos">Rhinos</a></nav>
    <h2><a href="/rhinos/white.htm">The White Rhino</a></h2>
<p>...</p>
</article>

这在语义上正确吗？

Answer 1

如果article 元素包含nav 元素，则此nav 表示此article 的导航。这可以用于文章的目录，或者在文章被分成多个页面时用于分页。

你的例子没有多大意义，它的轮廓很乱，不是很清楚/不可用：

1. implied heading from <article>
  1.1 implied heading from <nav>
2 "The Borneo Elephant"
3. implied heading from <article>
  3.1 implied heading from <nav>
4. "The Malgasy Hippo"
5. implied heading from <article>
  5.1 implied heading from <nav>
6. "The White Rhino"

如果这确实是您网站的导航菜单，您应该使用 one nav。

然而，为每个导航项的最后一篇文章添加摘录并没有明显的解决方案（我猜这是一种相当不常见的方式）。这些通常是两个独立的部分，即一个用于导航的nav，一个用于最近的文章的section：

<nav>
  <!-- <h1>Navigation</h1> -->
  <ul>
    <li><a href="/elephants">Elephants</a></li>
    <li><a href="/hippos">Hippos</a></li>
    <li><a href="/rhinos">Rhinos</a></li>
  </ul>
</nav>

<section>
  <h1>Recent articles</h1>

  <article>
    <header>Category: <a href="/elephants">Elephants</a></header>
  </article>

  <article>
    <header>Category: <a href="/hippos">Hippos</a></header>
  </article>

  <article>
    <header>Category: <a href="/rhinos">Rhinos</a></header>
  </article>

</section>

假设您无法将这些部分分开：用户可能不清楚此摘录仅代表该类别/部分的一篇（即最新）文章；所以你可能会为此添加一些解释，所以也许为每个导航菜单项使用一个部分可能会起作用，例如：

<nav>
  <h1>Navigation</h1>

  <section>
    <h2><a href="/elephants">Elephants</a></h2>
  </section>

  <section>
    <h2><a href="/hippos">Hippos</a></h2>
  </section>

  <section>
    <h2><a href="/rhinos">Rhinos</a></h2>
  </section>

</nav>

在每个section 中，您可以添加摘录，例如，通过在section 中引入另一个标题：

  <section>
    <h2><a href="/elephants">Elephants</a></h2>
    <section>
      <h3>Newest "Elephants" article</h3>
      <article>
        <!-- excerpt -->
      </article>
    </section>
  </section>

或者只是添加一些文本：

  <section>
    <h2><a href="/elephants">Elephants</a></h2>
    <p>Newest "Elephants" article:</p>
    <article>
      <!-- excerpt -->
    </article>
  </section>

但我建议反对所有这些（将导航与最新文章列表混合）并使用单独的部分（如我的第一个 sn-p 中）。