标题中的图例有效吗？ <h1><legend> 说明</legend></h1>

Question

我想知道是否可以在标题中插入图例。这样，图例也可以具有与整个文档相关的层次结构。

我在下面有更多相关的文字，但需要为读者突出显示。在这种情况下，个人信息将同时为legend 和h2。 h1 将是网站中我选择不显示的另一个元素。

<fieldset>

   <h2>
     <legend>Personal information</legend>
   </h2>

   <h3>
     Credentials
   </h3>
   <label for="username">
      Username
   </label>
   <input id="username" type="text">
  <label for="surname">
      Surname
  </label>
  <input id="surname" type="text">

  <h3>
     Contact details
   </h3>
   <label for="street">
      Street
   </label>
   <input id="street" type="text">
  <label for="house-number">
      House number
  </label>
  <input id="house-number" type="number">

</fieldset>

Answer 1

如https://developer.mozilla.org/it/docs/Web/HTML/Element/legend中所述

允许的父元素：一个<fieldset>，其第一个孩子就是这个<legend>元素

在您的示例中，<legend> 元素不是其祖先 <fieldset> 的 第一个孩子，因此它不是有效的 HTML5 标记。

另外注意，像这样恢复元素的顺序

<legend><h2>Personal information</h2></legend>

标记仍然无效，因为<legend> 只允许phrasing content

Answer 2

元素 legend 不允许作为元素 h1 的子元素。 仅作为fieldset 的孩子。

来自 W3C 验证者的引述 -

可以使用元素图例的上下文： 作为 fieldset 元素的第一个子元素。