What is the most semantically-correct HTML element for a form field hint/note?
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 t开发者_StackOverflow中文版ext that goes under the field?
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).
精彩评论