<summary> 詳細内容（<details>）の要約や概要を設定する

<summary>タグの説明

<summary>は、<details>によって設置された「ディスクロージャー・ウィジェット」の詳細内容に対して、その要約や概要、キャプションといった、いわゆるサマリーを指定するために使用するタグです。

ディスクロージャー・ウィジェットとは、ユーザーのリクエストに応じて表示／非表示を切り替えることができるインターフェイスのことです。

<summary>は、<details>の最初の子要素として記述する必要があります。

<summary>タグの特徴

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• 視覚的な効果として、開閉可能なことを表すマーカーが文字の先頭に配置されます。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<summary>に指定できる主な属性

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<summary>の使い方とサンプル

このタグを使ったマークアップのサンプルです。<summary>で指定された内容を操作すると、<details>の内容が表示されます。

<details>
	<summary>summaryタグで指定した要約</summary>
	<div>details要素に含まれる詳細内容。</div>
</details>

<details>にopen属性を与えて、初めから内容を開示しておくこともできます。

<details open>
	<summary>open属性で開閉を操作</summary>
	<div>予め詳細を開いておきたい場合は、open属性をマークアップに加えます。</div>
</details>

その他、CSSを組み合わせて色々なインターフェイスを作ることができます。アコーディオン形式のメニューを作成する方法は<details>のページで解説しています。