Jaki jest najbardziej semantycznie poprawny element HTML dla wskazówki pola formularza/notatki?

Question

Etykieta i pole są łatwe; mamy <label>, a następnie odpowiednie pole wejściowe. Ale jaki jest najbardziej semantycznie poprawny element HTML do użycia w przypadku mniejszego tekstu informacyjnego, który trafia pod pole?

Answer 1

nie wiem konkretnego elementu lub atrybutu, aby je połączyć, ale można to zrobić za pomocą atrybutu ARIA 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> 

Ale w tym wszystkim w label wydaje dobry do mnie albo (także daje dobre możliwości stylizacji, ponieważ masz - semantyczny - pojemnik):

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

Możesz nawet zmieszać dwa .

Innym rozwiązaniem może być umieszczenie opisu w title (lub placeholder jak sugeruje @Alohci) atrybut elementu input (semantycznie jest to jeden opisując go), ale w tym przypadku trzeba by wstawić je do znaczników przez Javascript (lub CSS przy użyciu input:after { content : "e.g. " attr(placeholder) } - zasugerowane przez @Alohci).