What is the most semantically-correct HTML element for a form field hint/note?

Question

The label and the field are easy; we have <label> and then the relevant input field. But what is the most semantically-correct HTML element to use for the smaller informational text that goes under the field?

Answer 1

I don't know of a specific element or attribute to connect them, but you can do so using the ARIA attribute aria-describedby:

<label for="firstname">First Name</label>
<input type="text" id="firstname" aria-describedby="firstname-explanation" />
<p id="firstname-explanation">e.g. John</p>

But including everything in the label seems good to me either (also gives good styling abilities, as you have a - semantic - container):

<label>
    <span class="form-item-title">First Name</span>
    <input type="text" id="firstname" />
    <span class="form-item-description">e.g. John</span>
</label>

Or you could even mix the two.

Another approach could be to put the description in the title (or placeholder as suggested by @Alohci) attribute of the input element (semantically this is the one describing it), but in this case you have to insert it to the markup through Javascript (or CSS using input:after { content : "e.g. " attr(placeholder) } - suggested by @Alohci).