details - 備考や操作手段などの詳細情報

ユーザーが追加情報やコントロールを取得できるディスクロージャー・ウィジットを表します。
もし、details要素の子要素としてsummary要素が存在する場合には、summary要素の内容が、この詳細情報の要約となります。
summary要素が存在しない場合には、ユーザーエージェントがdetails要素の内容を要約するかもしれません。
尚、details要素は、脚注に使用することは推奨されていません。

もし、open属性が存在すれば、それは、その情報が表示されるべきであることを示します。なければ、表示するべきではありません。
open属性が削除された場合は、その情報自身を非表示にします。

details要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
details - - - - - - - -

details要素のHTML4からHTML5への変更点

details要素は、HTML5から新たに追加された要素です

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
open その情報が表示されるべきか否か

「基本」のサンプル

HTMLコード

<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>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/interactive-elements.html#the-details-element)