detailsタグとsummaryタグは頭いいね

ウェブページの表示には、文書の構造を表すためのHTML、デザインを表すためのCSS、動きを表すためのJavaScript、というように、複数の言語が使われています。見出しや段落や画像などを指定するにはHTMLを使い、文字の色や大きさ、配置などの指定にはCSSを、メニューの開閉やポップアップの表示などにはJavaScriptを使います。

2000年頃のブラウザでは、文字を点滅させたり左右に動かすためのHTMLタグというのがありました。HTMLタグなのに、動きを担当していたのです。しかし、しばらくしてこうしたタグは廃止されました。

見た目を表すのはCSSの担当ですが、HTMLに少しだけ残っています。例えば、bタグです。これは、bold、つまり、太文字にするために使われていました。これも「HTMLタグを装飾用に使うのはよくない、CSSを使うべきだ」という流れになりました。ただ、このタグは廃止にはならず、「注目させたい要素」を表すタグ、と意味づけが変わりました。とはいえ、一般的にはいまだに「太文字用のタグ」と認識されています。

こうした流れでいうと、detailsタグとsummaryタグは少し異色です。detailsは詳細折りたたみ用のタグで、summaryタグは概要表示のためのタグです。

多くのブラウザでは、開閉メニューのように表示されます。summaryタグの内容をクリックするとdetails内の内容が表示される、という具合。このサイトのメニュー表示でも使っています。JavaScriptを使わずに、動きが表現できます。

一方、文書内では、単純に「詳細と要約の関係を表している」と見ることができます。要約を頭に掲げて、その続きに詳細を載せる、という使いどころのわかりやすいタグです。

「文書の構造のみを示す」という本来のHTMLの役割からは逸脱していますが、「詳細と概要」という文書の構造を説明しているものとみなすことができます。そのうえで、JavaScriptを使わずに動きを表現するのにも使う（しかも、動きが文書構造から想像しやすい）という、頭のいいタグだと思います。