summary - details要素のキャプション、説明文

summary要素は、この親要素details要素のコンテンツの要約、キャプション、説明文を表します。

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

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

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

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

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。

「基本」のサンプル

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-summary-element)