インタラクティブ関連要素
details要素（オンデマンドの詳細情報）
| カテゴリ | フロー・コンテンツ、セクショニング・ルート、インタラクティブ・コンテンツ |
|---|---|
| コンテンツモデル | 1つのsummary要素の次にフロー・コンテンツを入れる |
| 利用可能な場所 | フロー・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | open（この要素のコンテンツをユーザに見せるかどうかを制御する。指定されれば、コンテンツが表示された状態になる） |
| デフォルトスタイル | - |
details要素は、ユーザに追加詳細情報を見せるディスクロージャー・ウィジットを表します。ディスクロージャー・ウィジットとは、ユーザの操作によって、詳細情報を表示したり非表示したりすることができるユーザ・インターフェイスのことを表します。エキスパンダーとも呼ばれます。
details要素には、まず最初に追加情報の要約と説明のためにsummary要素を入れます。そして、summary要素の次に、詳細情報を入れます。順番が逆にならないように気を付けます。
さらにopenコンテンツ属性を使って、詳細情報をデフォルトで表示するかどうかを制御します。openコンテンツ属性は論理属性ですので、セットされれば詳細情報はブラウザ上で表示されます。
■利用例
<section class="progress window"> <details open="open"> <summary>処理中... <progress max="100" value="30">30%</progress></summary> <p>100ページ中30ページ目を処理しています。</p> </details> </section>
■ブラウザでのレンダリング結果（Chromeの場合）
利用例では、デフォルトで詳細情報を表示させています。また、Chromeでは▼が表示され、そこをポイントしてクリックすると詳細情報が非表示になります。
summary要素（オンデマンドの詳細情報の要約）
| カテゴリ | なし |
|---|---|
| コンテンツモデル | フレージング・コンテンツ |
| 利用可能な場所 | details要素の最初の子として |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | なし |
| デフォルトスタイル | summary{ display:block; } |
summary要素は、details要素で表されたディスクロージャー・ウィジットの要約、キャプション、説明を表します。summary要素はdetails要素の最初の子要素として使う必要があり、details要素以外の要素の中で使うことはできません。
command要素（コマンド）
| カテゴリ | メタデータ・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ |
|---|---|
| コンテンツモデル | 空 |
| 利用可能な場所 | メタデータ・コンテンツ、またはフレージング・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 禁止。ただし<command />は表記可 |
| 要素固有のコンテンツ属性 | type（コマンドタイプを指定） label（コマンドの名前を指定。この値がユーザに表示される） icon（コマンドを表すアイコンのURLを指定） disabled（コマンドを無効にする） checked（該当のコマンドが選択されている状態であることを指定） radiogroup（コマンドのグループの名前を指定） |
| デフォルトスタイル | command{ display:none; } |
command要素は、ユーザが呼び出すことができるコマンド（命令）を表します。
基本的に、この要素はmenu要素の子要素として使い、もしcommand要素がmenu要素の子要素でない場合は、レンダリングされないと規定されています。
command要素で表すコマンドは、UNIXコマンドのように何かしらのコマンドが始めてから用意されるものではなく、onclickイベント・ハンドラ属性などを使ってJavaScriptで処理を用意します。
■利用例
<menu type="toolbar"> <command type="radio" radiogroup="alignment" label="Left" icon="alL.png" onclick="setAlign('left')" /> <command type="radio" radiogroup="alignment" label="Center" icon="alC.png" onclick="setAlign('center')" /> <command type="radio" radiogroup="alignment" label="Right" icon="alR.png" onclick="setAlign('right')" /> <command type="command" disabled="disabled" label="Publish" icon="pub.png" onclick="publish()" /> </menu>
現在時点（2011年8月）では、command要素をサポートしているブラウザはありません。
menu要素（コマンドのリスト）
| カテゴリ | フロー・コンテンツ typeコンテンツ属性がtoolbarの場合：インタラクティブ・コンテンツ |
|---|---|
| コンテンツモデル | 0個以上のli要素、またはフロー・コンテンツ |
| 利用可能な場所 | フロー・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | type（コマンドタイプを指定） label（コマンドの名前を指定。この値がユーザに表示される） |
| デフォルトスタイル | command{ display:none; margin-top:1em; margin-bottom:1em; padding-left:40px; list-style-type:disc; } menu[type=context]{ display:none; } |
menu要素は、コマンドのリストを表します。ウェブ・アプリケーションなどで、ツールバーやコンテキスト・メニューに使うことを想定して再定義されました。HTML4でも非推奨ながらもmenu要素が規定されていました。
HTML5では、menu要素にtypeコンテンツ属性を追加して、2つのキーワードが規定されました。なお、typeコンテンツ属性は列挙属性です。このtypeコンテンツ属性に指定されるキーワードによってmenu要素の意味とレンダリングが変わります。
| キーワード | 意味 |
|---|---|
| context | コンテキスト・メニュー |
| toolbar | ツールバー |
| 指定なし | コマンドのリスト |
また、HTML5ではlabelコンテンツ属性も加えられ、メニューのラベルを表すことができます。これは、サブ・メニューのラベルとして使うことを想定したものです。
■利用例
<menu type="toolbar"> <li> <menu label="ファイル"> <button type="button" onclick="fnew()">新規作成</button> <button type="button" onclick="fopen()">開く</button> <button type="button" onclick="fsave()">保存</button> <button type="button" onclick="fsavesas()">名前を付けて保存</button> </menu> </li> <li> <menu label="編集"> <button type="button" onclick="ecopy()">コピー</button> <button type="button" onclick="ecut()">切り取り</button> <button type="button" onclick="epaste()">貼り付け</button> </menu> </li> <li> <menu label="ヘルプ"> <li><a href="help.html">ヘルプ</a></li> <li><a href="about.html">アプリケーションについて</a></li> </menu> </li> </menu>
現時点でmenu要素をサポートしているブラウザはありません。
【各要素のリファレンス22】