ウェブランサー

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

取り扱い HTML5から追加された要素
カテゴリ なし
親にできる要素 <details>要素
子にできる要素 フレージング・コンテンツ
対応ブラウザ <summary>の対応状況を確認する

<summary>タグの説明

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

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

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

<summary>タグの特徴

<summary>は、1つの<details>要素内の最初に1つ設置することができます。それ以外の箇所で使うことはできません。この要素自体を入れ子構造にするこはできません。

<summary>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。

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

<summary>を使ったマークアップのサンプルです。

HTML
<details>
	<summary>summaryタグで指定した要約</summary>
	<p>details要素に含まれる詳細内容。</p>
</details>
<details>
	<summary>summaryタグで指定した要約</summary>
	<p>details要素に含まれる詳細内容。</p>
</details>
<details>
	<summary>summaryタグで指定した要約</summary>
	<p>details要素に含まれる詳細内容。</p>
</details>
表示確認
summaryタグで指定した要約

details要素に含まれる詳細内容。

summaryタグで指定した要約

details要素に含まれる詳細内容。

summaryタグで指定した要約

details要素に含まれる詳細内容。

<summary>に関連するHTMLタグ

コンテンツグループ要素
<blockquote> 引用文であることを表す(長文用)
<dd> 定義した用語の説明を記述する
<details> ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置する
<div> ブロックレベル要素としての範囲を指定
<dl> 定義リストであることを表す
<dt> 定義する用語を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<figure> 写真や図表などの自己完結した要素を表す
<hr> 区切り線(罫線)を引く
<li> リストの項目を表示する
<menu> リストをメニューとして扱う
<ol> 順序のあるリストを定義する
<p> 段落を指定する
<pre> ソースを整形済みテキストとして表示する
<summary> 詳細内容(<details>)の要約や概要を設定する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<ul> 順序のないリストを定義する