如何使用 <figure> 实现标题和摄影师信用

Question

我想创建一种标准方法来提供带有 alt 标签的图像，以实现可访问性和 SEO、描述性标题以及摄影师信用的单独元素。似乎每个元素只<figcaption>允许有一个<figure>，并且它必须是第一个或最后一个元素，因此排除了这样做：

<figure>
    <img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
    <figcaption class="caption">George, the doggo</figcaption>
    <figcaption class="photo-credit">Photo: Jane Doe</figcaption>
</figure>

其中哪一个最好，为什么？

1

<figure>
    <img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
    <div class="photo-credit">Photo: Jane Doe</div>
    <figcaption class="caption">George, the doggo</figcaption>
</figure>

2

<figure>
    <img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
    <figcaption>
        <span class="caption">George, the doggo</span>
        <span class="photo-credit">Photo: Jane Doe</span>
    </figcaption>
</figure>

3

还有别的事...

Answer 1

我会选择选项 2 的变体，即向内联元素的内容添加标点符号，以使它们作为句子更好地阅读。

<figure>
  <img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
  <figcaption>
    <span class="caption">George, the doggo.</span>
    <i class="photo-credit">Photo by Jane Doe.</i>
  </figcaption>
</figure>

MDN Web Docs规范对该元素的描述<figure>如下（重点是我的）：

HTML <figure>（带有可选标题的图形）元素表示自包含内容，可能带有可选标题，该标题是使用 ( <figcaption>) 元素指定的。该图、其标题及其内容作为一个单元进行引用。

将照片信用放在外面<figure>（正如另一个答案所建议的那样）将使其不再“独立”，因为信用是照片不可分割的一部分。该<figcaption>元素是最适合放置片尾字幕的位置，只要您的措辞方式不会让读者将其与部分标题混淆即可。

使用<i>信用元素可以进一步将其与标题分开（视觉上和语义上），如下所示：

HTML<i>元素表示由于某种原因与普通文本不同的一系列文本。