In HTML, the <optgroup> element is used to categorize multiple <option> elements within a <select> and display them in an organized manner with a label.
<optgroup>要素は、HTMLのフォーム要素である<select>タグの中で利用される要素のひとつです。主に複数の<option>をグルーピングし、オプション項目をカテゴリ分けして表示するために使用します。ユーザーに対しては、まとまりのある選択肢として視覚的または構造的にわかりやすくなるメリットがあります。
たとえば、大量の選択肢があるプルダウンメニューで、ジャンルごとにグループを分けるときなどに役立ちます。自動車メーカーの選択リストや、都道府県を地域ごとに分けるようなケースを想像すると分かりやすいでしょう。
そもそも<select>要素はプルダウンメニューやリストボックスを作るために使われます。その中で、
<option>要素は個々の選択肢を示す要素<optgroup>要素は複数の<option>をグループ化する要素という位置付けになっています。<option>は単独でも問題なく動作しますが、選択肢が多い場合やカテゴリごとにまとめたい場合に<optgroup>を使用すると、可読性やユーザビリティの向上を図ることができます。
<optgroup>は、以下のように<select>内で利用します。必須の属性としては、グループ名を示すlabel属性が存在します。
HTML
<select name="example">
<optgroup label="フルーツ">
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
<option value="orange">オレンジ</option>
</optgroup>
<optgroup label="野菜">
<option value="carrot">にんじん</option>
<option value="potato">じゃがいも</option>
<option value="onion">たまねぎ</option>
</optgroup>
</select>ブラウザ上では、「フルーツ」「野菜」という見出しの下に選択肢が並ぶ形で表示されます。ユーザーがメニューを開くとグループごとの区切りやラベルが視覚的にわかりやすく見えるようになります。
label属性が無い場合、意味的には正しくありません。HTMLのバリデーションでもエラーになりますので、必ず付与しましょう。<option>も選択できなくなります。disabledを付与した<optgroup>の中にあるすべての<option>は自動的に選択不可になります。また、ブラウザによってはグレーアウトして表示されます。HTML
<select name="prefecture">
<optgroup label="北海道・東北地方">
<option value="hokkaido">北海道</option>
<option value="aomori">青森県</option>
<option value="iwate">岩手県</option>
<!-- 以下略 -->
</optgroup>
<optgroup label="関東地方">
<option value="tokyo">東京都</option>
<option value="kanagawa">神奈川県</option>
<option value="chiba">千葉県</option>
<!-- 以下略 -->
</optgroup>
<!-- 他の地方も同様に -->
</select>このように日本の都道府県を地方ごとにグループ化すると、ユーザーが素早く目的の選択肢を見つけやすくなるメリットがあります。
HTML
<select name="category">
<optgroup label="本・書籍">
<option value="novel">小説</option>
<option value="comic">漫画</option>
<option value="magazine">雑誌</option>
</optgroup>
<optgroup label="家電">
<option value="tv">テレビ</option>
<option value="pc">パソコン</option>
<option value="camera">カメラ</option>
</optgroup>
</select>商品検索フォームなどでカテゴリをまとめると、ユーザーにとって論理的な分類を認識しやすくなります。
<optgroup>とlabel属性を正しく設定することで、スクリーンリーダー（音声読み上げブラウザ）はグループ名を読み上げながら選択肢を案内できます。label属性はできるだけ短く、的確に内容を表すようにしましょう。"フルーツ"、"野菜"、"都道府県"など、ユーザーがすぐに内容を理解できる言葉を使うことが理想です。<optgroup>を使うと、かえって選択が煩雑になることもあります。<option>だけの一覧表示でも十分ユーザーに配慮できるケースが多いです。<optgroup>はブラウザによって表示が若干異なりますが、ほとんどの場合太字やインデントがつけられ、グループ名が目立つようにレンダリングされます。ここではブラウザ依存のスタイルが適用されるため、細かい調整は難しい面があります。
<option>や<optgroup>に対してはカスタムのCSSスタイリングが制限される傾向があります。fontやcolorなど一部は変更できる場合もありますが、標準のプルダウンメニューの外観自体を大幅に変更することは困難です。<optgroup>と<option>の組み合わせをコンポーネント化しておくと、メンテナンス性や再利用性が向上します。厳密にはHTML仕様としては**<optgroup>を入れ子にすることは推奨されていません。一部ブラウザでは無視されたり、正しく表示されないケースがあります。複雑な階層表示が必要な場合は、<optgroup>を重ねるよりUIライブラリを使った別の階層構造**（たとえばドロップダウンリストを複数段階に分けるなど）を検討しましょう。
select要素やoptgroup要素を動的に生成する場合は、以下のようにdocument.createElement('optgroup')などを使います。appendChildあるいはinsertBeforeなどで<select>に挿入します。JavaScript
const selectEl = document.getElementById("mySelect");
const groupEl = document.createElement("optgroup");
groupEl.label = "新しいカテゴリ";
const optionEl = document.createElement("option");
optionEl.value = "newItem";
optionEl.textContent = "新規アイテム";
groupEl.appendChild(optionEl);
selectEl.appendChild(groupEl);<select>に限界を感じる場合は、JavaScriptプラグインやUIフレームワークを用いてよりリッチなセレクトボックス（オートコンプリート機能など）を実装する手段もあります。label属性を省略したらどうなりますか？label属性は必須なので、省略するとHTMLのバリデーションエラーになります。意味論的にも正しくないので、必ず指定しましょう。
<optgroup>を無効化したい時はどうすればいい？disabled属性を使います。付与すると、その中の<option>も含めて選択不可になります。
<optgroup>をネスト（入れ子）にして階層構造を作れますか？<optgroup>は、<select>要素の中で選択肢をカテゴリーごとにグループ化するための便利な要素です。
label属性によってグループ名を指定し、関連する<option>をまとめる。labelを使ってわかりやすい名称を付ける。初学者の方は、まずは<select> + <option>の基礎を抑えつつ、必要なシチュエーションで<optgroup>を導入してみてください。中級者・上級者の方は、より複雑なUIが必要な場合にはJavaScriptライブラリを活用するなどしつつ、ユーザーが快適に利用できるインターフェースを設計してみると良いでしょう。