<figure> 内的 HTML5 多个 <figcaption>答案

【问题标题】：HTML5 multiple <figcaption> inside <figure><figure> 内的 HTML5 多个 <figcaption>
【发布时间】：2014-11-13 16:26:35
【问题描述】：

我想知道figure 元素是否可以包含多个figcaption 孩子？

我在某处读到了一些东西（抱歉，现在我找不到它），似乎暗示它不能——但我确信figure 可以包含多个img，所以这似乎不合逻辑。

如果我有两个并排的相关图像，我想要单独的标题怎么办？

【问题讨论】：

在 google 上搜索你的标题得出了这样的结论：“只有一个
元素可以嵌套在
中，尽管
元素本身可能包含多个其他子元素”跨度>
谢谢。这背后的原因到底是什么？正如我所说：如果我有两个相关的图像并排，我想要单独的标题怎么办？可笑。
Figure 可以嵌套，因此您可以用 figcaption 将每个 img 包裹在一个 figure 中，并且仍然有一个 figure 元素围绕整个地段。
优秀。谢谢，Alochi-这就是我要找的！如果您想添加您的评论作为答案，我会接受。

标签： html

【解决方案1】：

您可以将img 及其figcaption 嵌套到多个图形标签中。要为代码添加更多语义，您可以添加 ARIA role 属性。

<figure role="group">
    <figcaption>Caption for the whole group of images</figcaption>

    <figure>
        <img src="picture1.jpg" alt="Description of picture 1">
        <figcaption>Caption for Picture 1</figcaption>
    </figure>

    <figure>
        <img src="picture2.jpg" alt="Description of picture 2">
        <figcaption>Caption for Picture 2</figcaption>
    </figure>

</figure>

【讨论】：

数字不能包含在 figcaptions 中。
“在 figcaptions 内”？我没有在代码中的 figcaption 中看到一个数字......一切对我来说似乎都是有效的。
我知道，但我无法撤消它。 :( 如果有什么安慰的话，它也让我感到震惊。

【解决方案2】：

在 HTML5 中，figure 是一个 sectioning root。 它可能有 sectioning root 或 flow content 作为内容。 figcaption 是 flow content， 并且可能只有 flow content 作为内容。因此，figcaption 可能没有 figure 作为内容。

一个figure可能有另一个figure作为内容。请记住，figcaption 必须是 figure 的 first 或 last child。

所以代码可能如下所示：

<figure>
  <img>
  <figure>
    <figcaption></figcaption>
  </figure>
  <figcaption></figcaption>
</figure>

或

<figure>
  <figcaption></figcaption>
  <img>
  <figure>
    <figcaption></figcaption>
  </figure>
</figure>

见：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure 和https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

【讨论】：

HTML5.1 正在寻求改变这一点，以便 figcaption 可以位于图形内的任何位置。

【解决方案3】：

据我所知，图中只能使用一次：http://www.w3schools.com/tags/tag_figcaption.asp

【讨论】：

不鼓励使用 w3schools 作为权威。它不精确，也没有得到很好的重视。