对于导航，图标题应该在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>

也可以在每个section元素（li）中使用<li><section>…</section></li>，但我不确定这会对文档大纲产生什么影响。