details 要素操作可能なウィジットを表す

details 要素は閲覧者が操作可能な、開閉式のウィジットを表します。所謂、アコーディオンメニューのようなものが簡単に作成できるはずですが、ブラウザのサポートが進んでいないのが現状です。

details 要素は、HTML5 仕様書 (HTML5 W3C Recommendation 28 October 2014) には含まれていません。HTML 5.1 Nightly で策定が行われています。

サンプルソースを見る

details 要素の仕様

カテゴリ
コンテンツモデル

最初の子要素として summary 要素が 1つ必須

この要素を使用できる文脈

フロー・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLDetailsElement : HTMLElement {
           attribute boolean open;
};

details 要素のサンプルソース

<details open="open">
 <summary>コンテンツメニュー</summary>
 <details>
  <summary>HTML</summary>
  <ul>
   <li><a href="/html5/tag.html">HTML5 タグリファレンス</a></li>
   <li><a href="/html5/info.html">HTML5 の基礎知識</a></li>
   <li><a href="/html5/link.html">HTML5 に関するリンク集</a></li>
  </ul>
 </details>
 <details>
  <summary>CSS</summary>
  <ul>
   <li><a href="/css/tag.html">CSS リファレンス</a></li>
   <li><a href="/css/info.html">CSS の基礎知識</a></li>
   <li><a href="/css/link.html">CSS に関するリンク集</a></li>
  </ul>
 </details>
</details>

W3C HTML5 仕様書

4.11.1 The details element