目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
  1. 1個だけのsummary要素必須
  2. 上記に続いて、Flow content
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、groupデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザにおいて期待されるレンダリング
  • 2個のblockボックスコンテナを有するblockボックスとして表示。
  • 1個目のblockボックスコンテナにはsummary要素を配置かつ表示し、閲覧者による2個目のコンテナの開閉の要請を受け付けるようにする。
  • 2個目のblockボックスコンテナにはその他の子孫を配置し、open属性がない場合は初期状態では表示しない。
  • 必須であるはずのsummary要素がない場合(非準拠)は、それに相当するデフォルトの凡例を表示する。一般的には、当該言語における「details」を意味する単語をデフォルトの凡例とする場合が多い。

W3C : HTML5.3デフォルトの凡例はユーザーエージェントによるが、ブラウザの地域設定・言語設定に基づくよりも、当該details要素lang属性の状態が示す言語に基づくべきであるとされていた。

意味・用法

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

私見・補足

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

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

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

Sectioning rootなので最上位セクションとなる。キャプション用の独自の子要素summary要素)があるので、子要素に第二段階のセクションが含まれない限り、Heading contentによる見出し入れは想定されてないように思われる。

details要素の内部に下位段階のセクションがある場合は、最上位の見出しは、summary要素内にHeading contentを入れて指定するのが適切な場合も多いように思われる。

表示確認

ソース

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

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

著者の詳細

名前:○○××

年齢:30歳

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

未対応ブラウザにおいては、最初から全部表示されてしまい、開閉もできない。

IE6表示のスクリーンショット
IE6表示:中身も最初から表示されており開閉できない

IE7からIE11も同様。