目次に戻る

label要素:HTML Living Standard各要素別メモ

概要

カテゴリー

W3C : HTML5.3Form-associated elementにも属していた。

配置できる場所
内容モデル
  • Phrasing content。ただし、「当該label要素によってラベル付けされているのではないLabelable element」及び「label要素」を子孫に含んではならない。
  • 子孫に正しくLabelable elementが含まれている場合は、それがラベル付け対象となる。
  • 内容テキストが、ラベルテキストとなる。
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • roleは指定不可。
意味・用法

Labelable elementに対するラベルを表す。

ラベル付け対象との関連付けの方法は、for属性によるか、子孫ラベル付け対象要素を内包するかのいずれか(対象が同一である限り、両方の方法を重複させることも可)。

複数のLabelable element子孫に含んでしまった場合は、そのうちの最初のLabelable elementのみがラベル付け対象となる。

チェックボックスラベルをつけた場合に、当該ラベルクリックしたら、当該チェックボックスチェック状態になる」かどうかなどのルールは、プラットフォーム(オペレーティングシステムとかブラウザとか)に依存する。

アクセシビリティ関連

私見・補足

個人的には、ラベル付け対象がほぼフォーム関連の要素に限定されているのが不満だ。label要素を汎用的なラベル付け要素として使いたい。

内容モデルを噛み砕いていうと下記のような感じだろう。

表示確認

ソース

  <label><input type="checkbox" />←のラベル</label>
  
表示結果