【问题标题】:Can a <figure> element contain only a <figcaption> without an image?<figure> 元素可以只包含一个没有图像的 <figcaption> 吗?
【发布时间】:2012-11-23 15:11:31
【问题描述】:

&lt;figure&gt; 元素只包含 &lt;figcaption&gt; 是否符合语义?确实是validate...

<figure>
  <img src="example.jpg">
  <figcaption>Image and caption</figcaption>
</figure>

<figure>
  <figcaption>Caption only</figcaption>
</figure>

在这种情况下,它会对 CSS 样式产生影响:

figure figcaption { color: red; }

【问题讨论】:

    标签: html semantic-web w3c-validation semantic-markup figure


    【解决方案1】:

    figure 元素中不需要img,它只是很常见,大多数使用figcaption 的示例也有图像。

    http://dev.w3.org/html5/spec/single-page.html#the-figure-element

    &lt;figure&gt; 元素因此可用于注释主要内容中引用的插图、图表、照片、代码列表等 文件,但这可以在不影响文件的流动的情况下 文档,从该主要内容移开,例如到一边 页面、专用页面或附录。

    http://dev.w3.org/html5/spec/single-page.html#the-figcaption-element

    &lt;figcaption&gt; 元素代表其余部分的标题或图例 figcaption 元素的父图形元素的内容,if 任何

    请注意“if any”部分,这让我相信figcaption 以外的内容可能不存在并且仍然有效。然而,正如 Alochi 指出的那样,这表明该元素存在误用,因为没有内容可供标题描述。

    在当前的规范示例中有一个示例,即非图像内容伴随着 figcaption,所以我认为可以公平地假设没有图像是完全可以的:

    这里,一首诗的一部分是用数字标记的。

    <figure>
      <p>'Twas brillig, and the slithy toves<br>
      Did gyre and gimble in the wabe;<br>
      All mimsy were the borogoves,<br>
      And the mome raths outgrabe.</p>
      <figcaption>
        <cite>Jabberwocky</cite> (first verse).
        Lewis Carroll, 1832->  98
      </figcaption>
    </figure>
    

    【讨论】:

      【解决方案2】:

      正如 Michael Malinovskij 回答的那样,图形元素应包含“流内容”以及 figcaption。

      The HTML5 spec has this to say about flow content

      作为一般规则,其内容模型允许任何流动的元素 内容或短语内容应至少有一个子节点 是明显的内容并且没有隐藏属性 指定。

      然而,这个要求并不是硬性要求,因为有很多 元素可以合法为空的情况,例如当它 用作占位符,稍后将由脚本填充,或 当元素是模板的一部分并且在大多数页面上是 已填写,但在某些页面上不相关。

      所以除了figcaption之外没有其他任何东西是有效的,但是除非您打算稍后填写内容,否则它可能无法传达有用或正确的含义,可以将其表征为不是语义的

      【讨论】:

      • 哦,对了,我太沉迷于“没有图像”的部分了。一个没有内容的单独的虚构标题是没有意义的,对吧?
      • @WesleyMurch - 很难看出什么时候才有意义,是的。
      • 奇怪的是,规范说“figcaption 元素的父图形元素的其余内容的标题,如果有的话”.. . 听起来它已经被考虑过了,而且除了 figcaption 之外没有其他内容是公平的游戏。不过,我看不出这有什么意义。
      【解决方案3】:

      图片允许的内容:

      • 一个 figcaption 元素,后跟流式内容
      • 流内容后跟可选的 figcaption 元素

      (c) w3c/figure

      【讨论】:

      • W3C 上的“跟随流内容”部分是灰色的——好奇它是否如此清晰......
      猜你喜欢
      • 2021-06-18
      • 2018-06-17
      • 2013-07-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多