What is the appropriate semantic markup for form label help sub-text

Question

Some form elements in a form may require text to explain the function of said element. I'm thinking of encapsulating this text in a paragraph element, as follows,

label p {
  margin-top: -1px;
  font-size: smaller;
}

<div class="form-group">
  <label for="form-input-1">Label Text
    <p>Label explainer/help text</p>
  </label>
  <input id="form-input-1" />
</div>

My question is: is the <p> element the most semantic element for this use? In my opinion, the label sub-text is a type of sub-title and one could argue that it may call for a <h*> element. But, these are often used for outlines, and I don't believe this would be super semantic here. Would a <span>, make sense here, as these may be used to mark off parts of inline flow elements?

Please, share your thoughts!

Answer 1

<label> elements can only contain phrasing content, which means they can't contain headings or paragraph elements, which are flow content.

Additionally, the MDN Docs note that headings should not be used within labels because that "interferes with many kinds of assistive technologies".

If additional form field instructions are needed beyond what would reasonably fit within a label, you should use a separate element, outside of the label—and tie it to the input using the aria-describedby attribute, as outlined on the W3C's Web Accessibility Tutorial on Form Instructions.

Here's an example of that approach:

form {
  display: grid;
  grid-gap: 0.5rem;
  padding: 0.5rem;
}

<form>
  <label for="input">Label Text</label>
  <span id="instructions">Additional instructions lorem ipsum</span>
  <input id="input" aria-describedby="instructions" type="text">
</form>