フォームフィールドヒント/メモの最も意味的に正しいHTML要素は何ですか？

Question

ラベルとフィールドは簡単です。我々は<label>を持っていて、次に関連する入力フィールドを持っています。しかし、フィールドの下に行くより小さな情報テキストのために使用する最も意味的に正しいHTML要素は何ですか？

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

しかしlabelのすべてを含む良いようだ：私はそれらを接続するために、特定の要素や属性を知りませんが、あなたはARIA属性aria-describedbyを使用して行うことができます

Answer 1

私にも（意味のある容器のように、良いスタイリング能力を与える）：

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

または2つを混ぜてもすることができます。

別のアプローチは、（意味的にこれはそれを記述する1つである）（@Alohciにより示唆されるようにまたはplaceholder）titleで説明を入れてinput要素の属性かもしれないが、この場合には、あなたはそれを挿入する必要がありますJavascript（またはinput:after { content : "e.g. " attr(placeholder) }を使用するCSS - @Alohciによって提案されたCSS）を介したマークアップ。