select 要素の子要素として hr 要素が使えるようになっています

著書 「できるポケット HTML&CSS 全事典 改訂 4 版」 発売日直前ということで、前書から変更された点を実際の紙面を交えて紹介する企画。HTML Standard の更新により、select 要素の子要素として hr 要素が使えるようになっていますけど、知っていました? というお話。

いよいよ明日 (2024 年 12 月 24 日) は 「できるポケット HTML&CSS 全事典 改訂 4 版」 の発売日なのですが、発売日直前ということで、今回の改訂で前書 (改訂 3 版) 執筆時から仕様が変更されたり、ブラウザのサポートが進んだりした関係で、最新版 (改訂 4 版) で修正したり、加筆した部分について、そのいくつかを紙面と共に紹介してみようと思います。

まずひとつめとして、HTML Standard の更新により、select 要素の子要素として hr 要素が使えるようになっていますけど、知っていました? というお話。

なお、書籍については下記をご参照ください。

select 要素の子要素としての hr 要素

さて表題の件、HTML Standard において、昨年の 5月に下記のプルリクエストがマージされ、select 要素の子要素として hr 要素が使用可能になりました。そんなに最近の話ではなく、もう 1 年半以上前の話なんですけどね。

元々、WebKit においては、select 要素の子要素としての hr 要素の使用が既にサポートされています。そこで、この機能を HTML Standard、つまり標準仕様に組み込むことで、制作者の混乱を減らしたり、互換性問題を解消できるのでは? というのが本件の議論のスタート。

一方で、「option 要素を区切りたいなら optgroup 要素があるんだからそれを使えばいいだろ」「hr なんて視覚的な区切りとして使われるだけで、意味論的な価値がないだろ」などといった反対意見もありましたが、仕様の修正は行われ、現在において、select 要素の子要素として hr 要素を使用することは、仕様的にも正しい記述となっています。

今回の改訂でも、もちろんこの部分については反映済みで、本紙 236 ページ、「select 要素」 の解説でも、「コンテンツモデル」 として hr 要素が追加されています (当然ながら、hr 要素の 「使用できる文脈」 にも変更あり)。

できるポケット HTML&CSS 全事典 改訂 4 版 236ページ select 要素の項目紙面

あ、そうそう、すでに前書までのシリーズをお持ちの方はもちろん、上記の紙面をご覧いただいてお気づきの方もいるかもしれませんが、本書は初版出版時から、全部の要素、属性名、属性値、プロパティや値 ...... などに日本語で読み仮名を付けてるんですよ。

人前で HTML や CSS についてしゃべったり、説明したりする時、普段何気なくタイピングしているあの属性やプロパティ、「どう発音するんだっけ?」 と焦りまくった経験のある方、本書を手に入れていただければ、そんな悩みともおさらばですよ。

閑話休題。あくまで個人的な意見ですが、option 要素を意味的にグルーピングしたいのであれば、やはり、optgroup 要素を使用するべきだと思います。

hr 要素は、本来、同じセクション内だけどちょっと話題が変わりますよ、という部分などで、その区切りを表す要素ですので、例えば同一の select 要素内で、グループ分けするほど種別や属性の違うものではないけれど、ちょっとだけ性質が変わるような選択肢の区切りとして使用するなら、optgroup 要素よりも柔軟に使用できてよいのではないでしょうか。


ということで、現時点で最新の仕様に基づいて改訂された 「できるポケット HTML&CSS 全事典 改訂 4 版」 は、2024 年 12 月 24 日発売。現在予約受付中ですので、もし気になった方はチェックしてみていただければ幸いです。

ご購入(ご予約)はこちらから

Amazon をはじめ、下記のオンラインショップでも予約できるようなのでリンクを掲載しておきます。その他、全国の書店さんでも注文可能だと思いますのでお近くの書店さんにご確認ください。

学校や会社でご購入いただく皆さまへ

学校で HTML や CSS をカリキュラムとして教えていらっしゃる講師の方、あるいは教科書採用のご担当者様、または Web サイト制作会社など、日常的に HTML / CSS を扱う会社の福利厚生の一環としてなど、一括購入のご予定がございましたら、下記の窓口から一度お問い合わせいただければと思います。


関連エントリー

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?