Question

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

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

例如：

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

它实际上取决于3个案例，

如果标题是针对此页面的内容（例如鸟类及其学术名称的图片，例如“麻雀”和“雀科”），那么<h3>会更有意义吗？或
如果它只是游戏的标题，那么它可以是“钢铁侠”，“hello kitty”，“bugs bunny”等，所以它实际上并不意味着页面的真实内容而只是用于游戏的一些名称，然后<div>将更合适，或
如果游戏是为了“hello kitty”，“pochacco”，“keroppi”，那么它们都是Sanrio的所有角色，那么使用<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>

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

2 个答案: