htmlforms

Can I insert <header> inside <form> element?

From example on MDN, I learned that I could title a form with heading tags like this: 

<form method="POST">
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
  <!--Input fields-->
</form>

My question: is it valid insert these introductory information (the title<h1> and the <p>) inside a <header> tag like this:

<form method="POST">
  <header>
    <h1>Payment form</h1>
    <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
  </header>
  <!--Input fields-->
</form>

Solution

  • Yes, it is valid. See https://www.w3.org/TR/html5/sec-forms.html#the-form-element that states that the form element can contain any Flow content except another form.

    4.10.3. The form element
    Categories: Flow content. Palpable content.
    Contexts in which this element can be used: Where flow content is expected.
    Content model: Flow content , but with no form element descendants.

    And in certain situations it can be semantically correct too. In my opinion, only when you need to semantically group various elements as an introduction to the form. For just a heading and a paragraph, ask yourself if grouping them means something or it's just information that complements the form itself.