<summary></summary>

更新日
仕様 HTML Living Standard
分類 ---
利用場所 details要素の最初の子要素として
内容 フレージング・コンテンツ / 任意でヘッディング・コンテンツと混在

summary要素は、開閉式ウィジェットのキャプション、要約、説明文などを表します。この要素は、details要素の最初の子要素として使用します。


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

</details>

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

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

<details>

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

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

</details>

summary要素を省略した場合は、デフォルトのテキストが表示されることになります。

例えば、Chrome、Edge、Firefoxの場合は詳細と表示されます。

<details>

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

</details>

旧HTMLからの変更点

使用例

summary要素を使用した例

<details>

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

<p>ここに詳細な情報を配置します。</p>

</details>

表示例
詳細を見る

ここに詳細な情報を配置します。

summary要素を省略した例

<details>

<p>ここに詳細な情報を配置します。</p>

</details>

表示例

ここに詳細な情報を配置します。

  • 対応しているブラウザでは、デフォルトのテキスト(詳細)が表示されます。