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

Question

我正在考虑这样的首页布局，其中 "the main navigation" 遍布整个页面，显示每个类别的最新文章，如下所示：

<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 的导航。这可以用于文章的 table 内容，或者在文章被分成多页的情况下用于分页。

你的例子没有多大意义，它的轮廓很乱，不是真的clear/usable:

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>

假设您不能将这些部分分开：用户可能不清楚此摘录仅代表该 category/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>

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

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

Can each article element have it's own nav?

html

nav

semantic-markup