<label>: LABEL 要素

最終更新：2026-10-13

<label>LABEL 要素

<label> 要素はフォーム部品のラベル（見出し）を定義します。for 属性で部品の id と関連付け、ラベルのクリックで部品にフォーカス・操作ができます。アクセシビリティとタッチ操作の向上に役立ちます。

カテゴリ	フォーム
コンテンツモデル	フレージングコンテンツ（<label> の入れ子不可）
許可される親要素	フレージングコンテンツを受け入れる要素
閉じタグ	必要 `</label>` タグ
ステータス	標準

📝 構文

<label for="username">ユーザー名:</label>
<input type="text" id="username">

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性	値	説明
`for`	Element ID	The ID of the associated form control.

すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<label>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

❓ よくある質問

Qlabel の for 属性は何のためですか？

Afor は入力欄の id を指して明示的な関連を作ります。label の文字をクリックすると入力欄にフォーカス／選択が入り、スクリーンリーダーは label を入力名として読み上げます。書き方：<label for='email'>メールアドレス</label><input id='email'>。

Qlabel で input を包めば for は不要ですか？

A不要になります。label がコントロールを包むと暗黙の関連になり、for も id も不要です。ただし1つの label が包めるのは1つのコントロールだけです。暗黙の関連は複雑なレイアウトに向きません（label はコントロールと離れて置かれがちです）。明示的な for の方が柔軟で、同じコントロールに両方式を混在させないようにしましょう。

Qlabel の中に見出しやリンクを置けますか？

A置くべきではありません。見出し（h1-h6）やインタラクティブ要素（リンク・ボタン）は入れられません。label の意味は「コントロールの名前」であり、インタラクティブ要素を入れ子にするとクリック動作が衝突し、スクリーンリーダーの読み上げも混乱します。補足説明は label の外に置くか、aria-describedby で関連付けます。