optgroup要素：HTML Living Standard各要素別メモ

概要

カテゴリー

• なし。

配置できる場所

• select要素の子孫として。

内容モデル

1. 1個以下のlegend要素。グループ名を示すラベルテキストとなる。
2. 上記に続いて、0個以上のoption要素、div要素、noscript要素、又はScript-supporting contentに属する要素。

属性

• グローバル属性
• label→グループ名を示すラベルテキストを指定。子要素にlegend要素を含まない場合は必須。
• disabled→ブーリアン属性。指定された場合は、子孫のフォームコントロールがすべて無効になる（選択できなくなる）。この状態は、スクリプトを用いないと解除できない。

HTML構文におけるタグの省略

• 終了タグ→一定条件で可。

WAI-ARIA

• デフォルトroleは、group。デフォルトroleをrole属性値に指定することは、推奨されない。
• デフォルトrole以外のroleは、指定不可。
• disabled属性が指定されている場合は、aria-disabled属性を指定すべきではない。
• disabled属性が指定されている場合は、aria-disabled属性値にfalseを指定してはならない。

視覚系ブラウザのデフォルトとして期待されるCSS

  optgroup {
    display: block;
    font-weight: bolder;
  }
  

select要素に{appearance: base-select;}が有効に適用されて表示される場合は、下記を適用。

  select optgroup {
    display: block;
    font-weight: bolder;
  }
  

視覚系ブラウザにおいて期待されるレンダリング

• ラベルテキスト部分については、{padding-inline: 0.5em; min-block-size: 1lh;}が適用されたようなレンダリングが期待される。

意味・用法

共通のラベルを持つoption要素（選択肢）のグループを表す。

私見・補足

optgroup要素を多重に入れ子にできないことに不満な人もいるのではないかと思う。

label属性値とlegend要素の両方が存在する場合は、legend要素がラベルテキストとなる。ただし、子要素にlegend要素を配置することに未対応のユーザーエージェントにおいては、label属性値がラベルテキストとなる。

表示確認

select要素を参照。