| 項 目 | 説 明 |
|---|---|
| 記述形式 | <summary>～</summary> |
| 対応ブラウザー | H?+ |
| 種 類 （カテゴリー） |
なし |
| 置ける場所 | details要素の最初の子要素 |
| 内包要素 （コンテンツ・モデル） |
フレージング・コンテンツ，または， ヘッディング・コンテンツ の１つの要素 （コンテンツ・モデル: カテゴリー） |
HTML5.1 では，既定では非表示の詳細な情報や各種のコントロールをユーザーの操作に応じて表示する要素 として，<details> が用意されています。（<details> 参照。）
<summary> は，<details>～</details> 間の最初の子要素として１つだけ記入します。 details要素内の詳細情報の要約，キャプション，または，説明として，既定で最初からブラウザーに表示される内容 を記入します。
HTML5 では，新規導入の要素として検討が行われていましたが，<details>要素とともに，最終的には採用は見送られました。
しかし，HTML5.1 で再検討の結果，導入が決定されました。
| 種 類 | 名 称 |
|---|---|
| 【固有属性】 | なし |
| 【グローバル属性】 | accesskey，class，contenteditable *，
dir， hidden *，id， lang，spellcheck *，style， tabindex，title，translate * |
| 【ARIA role属性】 で 指定可能な値 （役割） |
button |
| 【ARIA aria-* 属性】 で 指定可能なもの |
ARIA グローバル状態とプロパティ， 指定可能な役割の任意の状態とプロパティ |
| 種 類 | 名 称 |
|---|---|
| 【よく使うもの】 |
次の例では，進捗状況の詳細を示すデータを隠すために details 要素 が用いられています。
| HTMLソース | |
|---|---|
| HTML <body> ～ </body> |
<section class="progress window">
<h1>コピー中： "あなたの少年時代の夢を本当にかなえる"</h1>
<details>
<summary>コピー中...
<progress max="375505392" value="97543282"></progress> 25%
</summary>
<dl>
<dt>転送速度:</dt> <dd>452KB/s</dd>
<dt>転送元ファイル名:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>転送先ファイル名:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>経過時間:</dt> <dd>01:16:27</dd>
<dt>カラープロファイル:</dt> <dd>SD (6-1-6)</dd>
<dt>画面サイズ:</dt> <dd>320×240</dd>
</dl>
</details>
</section> |
| ブラウザー 表示例 （未対応ブラウザーでは正常に表示できません） |
|---|
コピー中： "あなたの少年時代の夢を本当にかなえる"コピー中... 25%
|
次の例では，details 要素 を用いて，どのように既定の状態で入力コントロールを非表示にするかを示しています。
| HTMLソース | |
|---|---|
| HTML <body> ～ </body> |
<div style="text-align: left;">
<details>
<summary><label for="fn">名前と詳細:</label></summary>
<p><input type="text" id="fn" name="fn"
value="Pillar Magazine.pdf"></p>
<p><label><input type="checkbox"
name="ext" checked> 詳細を非表示</label></p>
</details>
</div> |
| ブラウザー 表示例 （未対応ブラウザーでは正常に表示できません） |
|---|
|