Search code examples
htmlheaderaccessibilitylegendmarkup

Is legend in header valid ? <h1><legend> Caption </legend></h1>

I would like to know if I could insert a legend inside a header. This way the legend can have also its hierarchy related to the whole document.

I have more text below which is relevant but needs to be highlighted for the readers. In this case personal information would be legend and h2 at the same time. h1 would be another element in the site which I chose not to display.

<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>
Solution

  • As stated in https://developer.mozilla.org/it/docs/Web/HTML/Element/legend

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

    In your example the <legend> element is not the first child of its ancestor <fieldset>, so it is not valid HTML5 markup.

    Furthermore note that also reverting the order of the elements like so

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

    the markup would not be still valid, since <legend> allows phrasing content only