对于导航，图形标题应该放在 figcaption 中吗？

Question

假设您登陆了一个类别网页，该网页的唯一目的是通过用图片和简短标题告知您每个子类别的内容，将您引导至适当的子类别。

当谈到UX considerations — it was suggested 时，以下安排将是最佳的（文字在图像之前）：

每张照片和文字组合都会链接到各自的子类别。

考虑到 HTML5 语义，因为这些是子类别的标题，而不是确切的标题，使用 <figcaption> 元素是否合适？还是别的什么？

使用图形说明：

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<figure>
<a>
<figcaption>Rhinos</figcaption>
<img />
</a>
</figure>

改用标题（或其他东西）：

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<figure>
<a>
<h3>Rhinos</h3>
<img />
</a>
</figure>

或者，什么词在语义上是正确的，并且可以简化样式？

Answer 1

我认为这里使用figure element 是不正确的，因为这个内容可能是页面的主要内容，但是对于figure 它说：

[...] 但可以在不影响文档流程的情况下将其从主要内容移开 [...]

如果您有论文中的图表或新闻文章中的照片等，您将使用figure：“[...] 通常作为文档主要流程中的单个单元引用”的内容。

相反，我会为每个类别使用section，并将所有类别包含在nav 中（因为它是该部分内容的主导航，由标题“打开”我们星球上的动物”）。

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<nav> <!-- nav could be omitted -->

 <section>
  <a>
  <h1>Rhinos</h1> <!-- you could use h3 here instead -->
  <img />
  </a>
 </section>

 <section>
  …
 </section>

 <section>
  …
 </section>

 <section>
  …
 </section>

</nav>

---

如果您不想使用标题，也可以使用类别列表（dl 或 ul）。我认为ul 比dl 更适合这里：

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<nav> <!-- nav could be omitted -->
 <ul>
  <li><a>Rhinos <img /></a></li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
 </ul>
</nav>

也可以在每个 li 元素 (<li><section>…</section></li>) 中使用 section，但我不确定这会如何影响文档大纲。