图片下的标签/标题应该使用什么 HTML 元素？

Question

假设我有一排图片，每张图片下面应该有一个短标签或标题。

我应该使用<h3> 还是只使用<div> 或其他东西作为该标签或标题？

例如：

<ul>
    <li>
        <img ...>
        <h3>Iron Man</h3>
    </li>
    <li> ... 
    </li>
</ul>

它实际上是否取决于3种情况，即，

1. 如果标题是该页面的内容（例如鸟类的图片及其学名，例如“麻雀”和“雀”），那么<h3> 会更有意义吗？或

2. 如果只是游戏的标题怎么办，可以是“钢铁侠”、“hello kitty”、“bugs bunny”等，所以这并不意味着页面的真实内容而是只是一些用于游戏的名字，那么<div>会更合适，或者

3. 如果游戏是针对“hello kitty”、“pochacco”、“keroppi”的，所以它们都是三丽鸥的角色，那么使用<h3>实际上在语义上更正确，因为它们实际上表示有意义游戏主题的名称？

（或者除了<h3>和<div>，使用其他标签在语义上会更正确吗？）

Answer 1

我建议使用<figure> 和<figcaption> 元素：

<li>
    <figure>
        <img src="…" />
        <figcaption>
            <h3>Image Title</h3>
            <p>some text to describe the image</p>
        </figcaption>
    </figure>
</li>

但这是非常主观的。

参考资料：

• <figcaption>。
• <figure>。

Answer 2

有很多可能的方法，它们都取决于您的实际内容。这个一般不能回答。

如果标签/标题应该是文档大纲的一部分，那么您需要使用标题（不一定是 h3），也许还需要使用包含标题的分段内容元素（例如，section） 、图片和可能的其他内容。

<article>
  <img src="…" alt="…" />
  <h1>…</h1>
</article>

在许多情况下，使用figure + figcaption（如suggested by David Thomas）是合适的，但如果标签是应成为文档大纲一部分的标题，则不适用。由于figure 是一个分节根元素，它所具有的任何标题/节都不会影响此大纲。

<figure>
  <img src="…" alt="…" />
  <figcaption>…</figcaption>
</figure>

如果你想列出图片+标题，你也可以使用dl:

<dl>
  <dt><img src="…1" alt="…1" /></dt> <dd>…1</dd>
  <dt><img src="…2" alt="…2" /></dt> <dd>…2</dd>
</dl>

只使用p 也没有错（虽然没有语义/机器可读的关系）：

<img src="…" alt="…" />
<p>…</p>