summary要素

summary要素は、details要素によるディスクロージャー・ウィジェットの見出し(要約、説明)を表す要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト details要素の1つ目の子要素として使用できる。
コンテンツ・モデル フレージング・コンテンツ
属性 グローバル属性
ブラウザ対応

構文

<details>
	<summary>見出し</summary>
	<p>詳細情報。</p>
</details>

要点

  • summary要素は、details要素によるディスクロージャー・ウィジェットの見出し(要約、説明)を表す要素である。
  • ディスクロージャー・ウィジェットとは、ユーザーが表示/非表示を切り替えられるユーザー・インターフェース(UI)のこと。
  • summary要素を、details要素の1つ目の子要素として配置することで、詳細情報が非表示の状態でも表示しておく見出し(要約、説明)を指定できる。
  • summary要素は、HTML5にて新たに導入された要素である。

サンプルコード

<details>
	<summary>見出し1</summary>
	<p>詳細情報。</p>
</details>
<details>
	<summary>見出し2</summary>
	<p>詳細情報。</p>
</details>

サンプル

HTMLソースコード

<p><b>summary要素とは</b></p>
<details>
	<summary>概要</summary>
	<p>details要素によるディスクロージャー・ウィジェットの見出し(要約、説明)を表す要素。</p>
</details>
<details>
	<summary>カテゴリー</summary>
	<p>どのカテゴリーにも属さない。</p>
</details>
<details>
	<summary>コンテキスト</summary>
	<p>details要素の1つ目の子要素として使用できる。</p>
</details>

実際の表示

summary要素とは

概要

details要素によるディスクロージャー・ウィジェットの見出し(要約、説明)を表す要素。

カテゴリー

どのカテゴリーにも属さない。

コンテキスト

details要素の1つ目の子要素として使用できる。