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"

如果这确实是您网站的导航菜单，则应使用一个 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>

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

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

1 个答案: