仕様

SUMARY要素は、
summary要素の親details要素の
残りのコンテンツの
要約、キャプション、
または凡例を表します。

summary概要
カテゴリなし
種類通常要素
この要素を
使用できる
状態		details要素の最初の子として配置可能。
許可されて
いる内容		フレージングコンテンツ、オプションで見出しコンテンツと混合。
属性グローバル属性のみ
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		なし[既定値 : button]
DOM
インター
フェイス		HTMLElement
レンダリング
ウィジェット
  1. summary {
  2. display: list-item;
  3. counter-increment: list-item 0;
  4. list-style: disclosure-closed inside;
  5. unicode-bidi: isolate;
  6. unicode-bidi: bidi-override;
  7. }
  8. details[open] > summary {
  9. list-style-type: disclosure-open;
  10. }

CSS を大雑把に読むと、 リストスタイルのプロパティで指定されたコンテンツを含む marker疑似要素を生成します。 カウンターに 0 を加えます。 などになります。

参加
コンテキスト		ブロックフォーマットコンテキスト
確立
コンテキスト		ブロックフォーマットコンテキスト
summary要素は、要約を表します。

details要素は、追加情報を表します。

  1. <details>
  2. <summary>summary</summary>
  3. <div>details</div>
  4. </details>
summary
details
参照元
  1. HTML Living Standard. 4.11.2 The summary element
  2. HTML Living Standard. 15 Rendering 15.5.4 The details and summary elements
  3. HTML 5.2 W3C 勧告. 4.11.2 The summary element
  4. MDN Web Docs. HTML <summary>: 概要明示要素

使用可能な箇所

details要素の
最初の子として
配置できます。

summary要素は、details要素の最初の子として配置できます。

  1. <details>
  2. <summary>summary</summary>
  3. <div>details</div>
  4. </details>

details要素の最初の子で配置できます。

summary
details

配置できるコンテンツ

フレージングコンテンツを
配置できます。

summary要素は、フレージングコンテンツを配置できます。オプションで見出しコンテンツと混合して配置できます。

  1. <details>
  2. <summary><span>summary</span></summary>
  3. <div>details</div>
  4. </details>

span要素はフレージングコンテンツですので summary要素のコンテンツの一部として span要素を配置する事ができます。

summary
details
  1. <details>
  2. <summary><h3>summary</h3></summary>
  3. <div>details</div>
  4. </details>

h3要素は見出しコンテンツですので summary要素のコンテンツ (内容) の一部として h3要素を配置する事ができます。
details要素が区分化起源なので、見出しのレベルは祖先のアウトラインには影響しないので１から使えます。

summary
details

属性

グローバル属性のみ、設定できます。

気を付ける点

キャプション

details要素の幅に注意が必要だと思います。折りたたみウィジェットの必要領域がありますので、その分も配慮して幅を用意する必要があります。

CSSリセット

  1. summary {
  2. display: list-item;
  3. }

normalize.css というリセットCSS の一部で、すべてのブラウザで正しい表示を追加します。
summary要素の例示は、上記の CSSの効果を効かない指定をしている例です。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、リセットCSSを利用する事をお勧めします。

summary details