<summary>: 概要明示要素

この要素はグローバル属性のみを持ちます。

<summary> 要素の中身には、見出しコンテンツ、プレーンテキスト、段落内で使用できる HTML が入れられます。

<summary> 要素は、 <details> 要素の最初の子としてのみ使用できます。ユーザーがこの概要をクリックすると、親の <details> 要素が開閉し、 toggle イベントが <details> 要素に送信され、状態が変化したことを知ることができます。

<details> の内容は、<summary> のアクセシブル説明となります。

<details> 要素の最初の子が <summary> 要素でない場合、ユーザーエージェントは既定の文字列（ふつうは「詳細」）を折りたたみボックスのラベルとして使用します。

HTML 仕様書では、<summary> の既定のスタイルに display: list-item が含まれています。これで、ラベルの隣に既定で（多くは三角形で）表示される折りたたみウィジェットとして表示されるアイコンを変更したり削除したりすることができます。

スタイルを display: block に変更すると、展開用の三角印を削除することができます。

詳しくはブラウザーの互換性の節をご覧ください。すべてのブラウザーがこの要素の機能すべてに対応しているわけではありません。

Safari などの Webkit ベースのブラウザーでは、標準外の CSS 擬似要素 ::-webkit-details-marker によって、アイコンの表示を制御することが可能です。三角形の表示を消すには、 summary::-webkit-details-marker { display: none } を使用してください。

以下に <summary> を使用している例をいくつか示します。<details> 要素のドキュメントにもいくつか例があります。

<details> 要素の中で <summary> の使用を示す簡単な例です。

<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

結果

次のように、 <summary> の中で見出し要素を使用することができます。

<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

結果

これは現在のところ、間隔の問題をいくつか抱えており、 CSS を使用して修正することができます。

この例は、 <summary> 要素にいくらか意味を追加して、ラベルを重要であると示します。

<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

結果

• <details>