定義と使い方
<label>タグは
ユーザーインターフェースを提供するコントロール要素のラベル（label、名前表示）を表します。
このタグはコントロール要素の名前表示を提供することで、ユーザーに対してコントロール要素の可読性およびWebアクセシビリティを向上させる役割を果たします。
基本例
関連属性
<embed>タグはすべてのグローバル属性を使用でき、
このタグに特化したfor属性があります。
for属性
for属性は、そのラベルがどのコントロール要素と関連付けられるかを値として指定します。
つまり、for属性の値は、関連付けるコントロール要素のid値と同一である必要があります。
ユーザーインターフェースを提供するコントロール要素（以下「コントロール要素」）
以下に列挙するコントロール要素は、可読性およびWebアクセシビリティを考慮し、<label>タグと併せて使用する必要があります。これらの要素はラベル可能要素（labelable）と呼ばれます。
<input>：type属性の値がhidden、button、reset、submit以外の場合<textarea><select><meter><progress><output>
以下に列挙するコントロール要素はボタンの形で表示されるため、<label>タグと併せて使用する必要はありません。
<button><input type="button"><input type="submit"><input type="reset">
これらの要素は、要素自体のテキストが名前表示（label、ラベル）の役割を果たすため、<label>タグは不要です。
<label>タグをコントロール要素に使用するメリット
コントロール要素に<label>タグを使用しなくても、文法的に誤りというわけではありません。しかし、<label>タグをコントロール要素に関連付けることは、Webアクセシビリティおよびユーザーエクスペリエンスを向上させるうえで重要な役割を果たします。
- Webアクセシビリティ向上のためのスクリーンリーダー対応：
<label>タグのfor属性と関連付けられたコントロール要素のidを照合することで、該当するコントロール要素の名前表示であることを明確に認識できるようになります。 - ユーザー利便性の向上：
<label>をクリックすると、マッチングされたコントロール要素がフォーカスされる、またはアクセス可能になります。
<label>タグとコントロール要素の関連付け
方法1：for属性を使用する
<label>タグと関連付けてマッチさせるコントロール要素のid値を、<label>タグのfor属性の値として指定すると、この<label>タグとコントロール要素は関連付けられ、マッチングされます。
このように関連付けることで、<label>のテキスト（「こちらをクリックしてください。」）をクリックすると、関連付けられたチェックボックスにフォーカスが当たります。
方法2：コントロール要素を囲む
<label>タグと関連付ける際、マッチさせるコントロール要素のid値を<label>タグのfor属性の値として指定せず、次のように<label>タグでマッチさせるコントロール要素を囲むことで関連付けることもできます。
上記の2つの方法はいずれも、仕様書では有効な例として示されています。
<label>タグとコントロール要素を関連付けられない場合
コントロール要素は、Webアクセシビリティを考慮すると、ユーザーに対してどのような目的の操作を行う要素なのかという情報、つまり名前表示を必ず提供する必要があります。<label>タグはこの役割を担いますが、<label>タグをやむを得ず使用できない場合には、次のようにtitle属性を使用してラベルを補足する必要があります。
補足説明title属性は、この属性が指定された要素に対する指針や説明など、参考となる情報を示します。
一部のデスクトップブラウザでは、ツールチップ（tooltip）として表示されます。
アクセシビリティに関する考慮事項
前述のとおり、<label>タグは、ユーザーに対して可読性およびWebアクセシビリティを向上させる役割を果たします。スタイルを適用していない場合でも、視覚的なスタイリングに大きな違いはありません。
ほとんどのブラウザでは、<label>タグのCSSプロパティであるcursorのデフォルト値がdefaultに設定されています。
<label>タグを使用する際は、アクセシビリティに注意する必要があり、いくつか考慮すべき事項があります。
<label>タグ内にインタラクティブ要素を配置しない
<label>タグ内に<a>や<button>などのインタラクティブ要素を配置しないでください。
そのようにすると、ユーザーが<label>に関連付けられたコントロール要素へアクセスする際の妨げになります。
ボタン要素の名前表示として使用しない
<button>、<input type="button">、<input type="submit">、<input type="reset">などのボタン要素は、要素自身のテキストが名前表示（label、ラベル）の役割を果たすため、<label>タグは不要です。これらに<label>タグを使用すると、Webアクセシビリティに対応したスクリーンリーダーや補助技術の動作を妨げる可能性があります。
<label>タグに関連付けられるコントロール要素がない場合
<label>タグは、ユーザーインターフェースを提供するコントロール要素の名前表示（label、ラベル）を示すタグです。そのため、次のような場合は誤ったマークアップとなります。
<label>タグが、関連付けるコントロール要素なしで単独で使用されている場合<label>タグが、関連付けるコントロール要素と1対1で関連付けられず、2つ以上のコントロール要素に関連付けられている場合<label>タグが関連付けられた要素がラベル可能要素（labelable）でない場合
技術的な文法のまとめ
ブラウザ互換性
| タグ |
デスクトップ Chrome
|
デスクトップデスクトップ Edge
|
デスクトップ Firefox
|
Safari
|
|---|---|---|---|---|
<label>
|
1 | 12 | 1 | 4 |
仕様書
| 仕様書 | |
|---|---|
<label>
|
HTML Standard #the-label-element |