<summary></summary>

ブラウザ
  • Cr
  • Sf
  • Fx
分類 ---
利用場所 details要素の最初の子要素として
内容 フレージング・コンテンツ / ヘッディング・コンテンツ(1つだけ) どちらかのみ

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

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

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

</details>

対応しているブラウザでは、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要素)はセクショニング・ルートとなるので、上記のように独自の見出しのランク付けを行うことができます。

使用例

summary要素を使用した例

<details>

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

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

</details>

表示例
詳細を見る

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

summary要素を省略した例

<details>

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

</details>

表示例

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

  • 未対応のブラウザでは、デフォルトのテキスト(詳細等)は表示されません。