html - header 中的图例是否有效？

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 中所述

Permitted parent elements: A <fieldset> whose first child is this <legend> element

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

此外请注意，还像这样恢复元素的顺序

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

标记将不再有效，因为 <legend>允许 phrasing content只有