1

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

当谈到UX 考虑时——有人建议以下安排将是最优化的（文本在图像之前）：

在此处输入图像描述

每个照片和文本组合都将链接到相应的子类别。

考虑到语义 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>


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

4

1 回答 1

1

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

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

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

相反，我将使用section每个类别并将所有类别包含在 a 中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>…&lt;/li>
  <li>…&lt;/li>
  <li>…&lt;/li>
 </ul>
</nav>

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

于 2012-12-07T06:32:16.147 回答