詳細情報のキャプションや要約を表す

summary要素は、詳細情報のキャプション、要約、説明文などを表します。この要素は、details要素の最初の子要素として使用します。

• この要素はHTML 5.1で追加されました。

対応しているブラウザでは、summary要素内のテキストをクリックすることで、詳細情報の表示・非表示を切り替えることができます。

この要素を使用する場合は、次のようにdetails要素内の先頭に配置します。

<details>

<summary>詳細を見る</summary>

<p>詳細な情報。</p>

</details>

summary要素を省略した場合は、デフォルトのテキストが表示されることになります。（対応しているブラウザのみ）

例えば、Chrome（55）、Safari（5）、Firefox（50）の場合は詳細と表示されます。

<details>

<p>詳細な情報。</p>

</details>

要素の内容について

summary要素の内容には、フレージング・コンテンツかヘッディング・コンテンツ（1つだけ）のどちらかを配置することができます。

次の例では、この要素内でh1要素を使用しています。

<section>

<h3>セクションの見出し</h3>

<details>

<summary><h1>詳細情報の見出し</h1></summary>

<p>詳細な情報。</p>

</details>

</section>

summary要素の親要素（details要素）はセクショニング・ルートとなるので、上記のように独自の見出しのランク付けを行うことができます。