details要素：HTML Living Standard各要素別メモ

概要

カテゴリー

配置できる場所

上記カテゴリーの要素が置ける場所。

内容モデル

1個だけのsummary要素。必須。
上記に続いて、Flow content

main要素の規定による制限
- main要素を子孫に含んではならない。

属性

グローバル属性
open→ブーリアン属性。指定されていれば初期状態は「表示」、そうでなければ「非表示」

HTML構文におけるタグの省略

省略不可。

WAI-ARIA

デフォルトroleは、group。デフォルトroleをrole属性値に指定することは、推奨されない。
デフォルトrole以外のroleは、指定不可。

視覚系ブラウザにおいて期待されるレンダリング

2個のスロットを有するblockボックスとして表示。
1個目のスロットにはsummary要素を配置し、閲覧者が2個目のスロットの表示・非表示を要求できるようにする。
2個目のスロットにはその他の子孫を配置し、open属性がない場合はその（疑似的な）style属性にdisplay: block; content-visibility: hidden;を設定し、open属性がある場合はこの（疑似的な）style属性を削除する。
必須であるはずのsummary要素がない場合（非準拠）は、それに相当するデフォルトの凡例を表示する。一般的には、当該言語における「details」を意味する単語をデフォルトの凡例とする場合が多い。

意味・用法: ユーザーが追加の情報やコントロールを得ることができる開閉式ウィジェットを表す。

私見・補足

ユーザーの操作によって表示・非表示が切り替えられる追加情報・追加コントロールの部分を表す。

クリック操作によるものが一般的になるかと推測される。

意味合い的にいって、この要素の内容に、最初から見えていてしかるべき重要な情報を含めるのは間違いだろう。

表示確認

ソース


  <p>お問い合わせは、著者宛てに電子メール(example@example.com)を送信してください。</p>
  <details>
    <summary>著者の詳細</summary>
    <p>名前：○○××</p>
    <p>年齢：３０歳</p>
    <p>ホームページアドレス：example.com</p>
  </details>

表示結果

お問い合わせは、著者宛てに電子メール(example@example.com)を送信してください。

著者の詳細

名前：○○××

年齢：３０歳

ホームページアドレス：example.com