图例中的标题是否有效？ <图例> <H1>标题</H1> </图例>

Question

我在visual studio中使用它，但是编译器声称h1不能嵌套在legend元素中，但浏览器无论如何都可以渲染它，所以我很困惑这是否有效？

<fieldset>
   <legend>
     <h1>Caption</h1>
   </legend>
</fieldset>

Answer 1

标准不需要浏览器做很多事情： - ）

此页面here（HTML4）指定legend关键字，并声明它可以包含inline elements，其中标题不是其中的一部分。它还有其他可能有用的内容，例如big或strong。

此外，H1的相关网页未将legend列为允许其中包含的项目之一。您还可以使用图例的id，class或style属性来设置基础文本属性。

Answer 2

在HTML5中，<legend>元素中允许的元素是Phrasing Content组中的元素。根据文档：

  

短语内容是文档的文本，以及在段落内标记该文本的元素。

Answer 3

在HTML 5.2中，这似乎是有效的：

  

16年4月10日。传奇元素     内容模型：       短语内容和标题（h1-h6元素）。

https://w3c.github.io/html/sec-forms.html#the-legend-element

这是一个非常好的消息，因为在复杂的形式中，传说与标题的用途相同，例如屏幕阅读器只在聚焦表单元素时才会宣传图例。

Answer 4

在图例中没有它无效。您可以使用wc3 validator来验证您的代码

Answer 5

字段集的图例元素不是设计为允许子元素，除非它们被视为“短语内容”。虽然大多数浏览器都不会抱怨（从而使它在实践中有效），但最好使用样式来设置图例元素的外观/感觉，因为这是css的用途，元素应该用于逻辑分组/识别内容没有造型。

  

图例：http://www.w3.org/TR/html5/forms.html#the-legend-element

     

短语内容：http://www.w3.org/TR/html5/content-models.html#phrasing-content

Answer 6

如果你检查html标准，它说：

<!ELEMENT LEGEND - - (%inline;)*       -- fieldset legend -->

%inline部分意味着它应该只包含字符级元素和文本字符串。因此，虽然它确实呈现，但你不应该这样使用它，因为html实际上是无效的。

Answer 7

在HTML5中，您可以使用<h1>用于图例在字段集中提供的相同目的，因为字段集被视为切片根。因此，如果你想摆脱传说中不可思议的造型怪癖，请使用这个可访问的标记：

<fieldset role="group" aria-labelledby="heading">
    <h1 id="heading">Caption</h1>
    <p>Other stuff...</p>
</fieldset>