<details> / <summary>
JavaScriptなしで組み込みの開閉UI(アコーディオン)を実現するHTML要素。<details> は中身を、クリックできる <summary> の見出しの裏に隠し、開閉する。アクセシブルでキーボード操作にも標準で対応する。
仕組み:内容を <details> に入れ、先頭に <summary> を置く。ブラウザはクリックされるまでsummaryだけを表示し、クリックすると中身が開く。open 属性が状態を制御・反映する。使いどころ:FAQ、「続きを読む」、折りたたみパネル、ネタバレなど、以前はJSで表示・非表示を切り替えていたもの全般。新しい工夫として、同じ name 属性を持つ複数の <details> は、排他的なアコーディオン(同時に一つだけ開く)として動く。これもJS不要である。利点は、アクセシビリティが無料で手に入ること(スクリーンリーダーとキーボードに対応)、コードが要らないこと、JSがオフでも動くことだ。::details-content でスタイルを付けたり、アニメーションさせたりもできる。JSウィジェットの一分野をまるごと置き換えるHTML機能の、古典的な例である。dialog要素やポップオーバーと関連する。