在figure标签内应该使用什么HTML5标签？

Question

figure标签显示一个垂直的2D条形图展示销售的某些值。figcaption标签显示标签“销售”。

我应该使用哪个HTML5标签来包裹figure内部的div？

<figure>
        <div class="push-center roundedArea" style="background-color:#fff;height:22%;"></div>
        <div class="push-center diagram" style="background-color:#ff99cc;height:11%;">3</div>
        <div class="push-center diagram" style="background-color:#ff33cc;height:44%;">44</div>
        <div class="push-center diagram" style="background-color:#ff66cc;height:23%;">36</div> 
    </figure>
<figcaption>
  Sales
</figcaption>

- HelloWorld

---

W3C Wiki figure article 解释了其中一些语义用法的变化。figure spec指出，它应该包含一个可选的 figcaption 元素和流内容。流内容基本上是 此列表 上的任何东西。简而言之：您可以在其中放很多东西，只要确保其具有语义意义。此外，在 figure 元素内允许使用 div 元素。 - ajp15243

是的，我看到div标签是流内容标签之一，谢谢 :) 把它放在一个解决方案中？ - HelloWorld

发布为一个答案 :) - ajp15243

Answer 1

MDN的figure文章解释了它的一些语义用途，这些用途是多种多样的。 figure规范指出，它应包含带有可选的figcaption元素的“流内容”，位于流内容之前或之后。流内容基本上是此列表上的任何东西。

简而言之：你可以在其中放很多东西，只要它具有语义化意义即可。

此外，在figure元素内允许使用div元素（请参见上面链接中的列表）。

- ajp15243

---

尽管你的答案是正确的，但我意识到我错误地使用了figcaption。W3C表示figure包含一个figcaption，但我的figcaption在figure之外。嗯...这很愚蠢。我不能改变它，因为这会导致技术显示问题... - HelloWorld

@HelloWorld 我看到你把 figcaption 放在了 figure 外面。请注意，figure 不需要 figcaption。我查看了 figcaption 规范，它表示“如果有的话，figcaption 元素的父级 figure 元素的内容*”（强调是我的）。其中的“如果有”的部分意味着 figcaption 可以放在 figure 元素外面，但在这种情况下可能没有太多意义。因此，在技术上是正确的，但在语义上可能不正确将其放在 figure 外面。 - ajp15243

啊，好的，当我使用图形并且我有一个标签为图中每个元素提供含义时，我想要使用figcaption，我认为这是正确的，实际上甚至必须这样做才能达到100％的语义正确性 :) - HelloWorld