コメント：HTML 5は、Webアプリケーション1.0とも呼ばれます。この目標を達成するために、Webページにインタラクティブなエクスペリエンスを提供するためにいくつかの新しい要素が追加されます。
HTML 5は、Webアプリケーション1.0とも呼ばれます。これを達成するために、いくつかの新しい要素が追加され、Webページにインタラクティブなエクスペリエンスを提供します。
詳細
Datagrid
メニュー
指示
これらの要素はすべて、サーバーから新しいページをロードせずに、ユーザーアクションと選択に基づいて表示されたコンテンツを変更できます。
詳細
詳細要素は、デフォルトで表示されない詳細を表します。オプションの凡例要素は、詳細の要約を提供できます。
詳細要素の使用の1つは、脚注とエンドノートを提供することです。例えば：
CraveriのMurreletの請求書は約10％薄い
XantusのMurreletの手形よりも。
<詳細>
<legend> [Sibley、2000] </legent>
<p> sibley、デビッド・アレン、鳥のシブリーガイド、
（ニューヨーク：Chanticleer Press、2000）p。 247
</p>
</詳細>
特定の表示方法は指定されていません。ブラウザは、脚注、エンドノート、ツールチップを選択できます。
各詳細要素は、オープンプロパティを持つことができます。このプロパティが設定されている場合、詳細が最初に表示されます。このプロパティが設定されていない場合、ユーザーが表示されるように依頼するまで隠されます。どちらの場合でも、ユーザーはアイコンまたはその他のコントロールをクリックして詳細を表示または非表示にできます。
Datagrid
Datagrid要素はグリッド制御を提供します。ツリー、リスト、テーブルを表示するために使用でき、ユーザーとスクリプトはこれらのインターフェイス要素を更新できます。対照的に、従来のテーブルは主に静的データを表示するために使用されます。
Datagridは、コンテンツ（テーブル、選択、またはその他のHTML要素）から初期データを取得します。たとえば、コード9のデータグリッドにはスコアシートが含まれています。この例では、Datagridのデータはテーブルから来ています。よりシンプルな1D Datagridは、選択要素からデータを取得できます。他のHTML要素を使用すると、各子要素がグリッド内の行になります。
<datagrid>
<表>
<tr> <td>ジョーンズ</td> <td> allison </td> <td> a - </td> <td> b </td> <td> a </td> </tr>
<tr> <td> smith </td> <td>ジョニー</td> <td> a </td> <td> c </td> <td> a </td> </tr>
<tr> <td> willis </td> <td> sydney </td> <td> c - </td> <td> d </td> <td> f </td> </tr>
<tr> <td> wilson </td> <td> frank </td> <td> b- </td> <td> b </td> <td> b </td> <td> a </td> </tr>
</table>
</datagrid>
この要素と通常のテーブルの違いは、ユーザーが行、列、セルを選択できることです。折りたたみ列、列、細胞。セルの編集。行、列、セルを削除します。グリッドをソートします。クライアントブラウザで他のデータ操作を直接実行します。 JavaScriptコードを使用して、更新を監視できます。 htmldatagridelementインターフェイスがドキュメントオブジェクトモデル（DOM）に追加されて、この要素をサポートします（コード10 htmldatagridelement）。
インターフェイスhtmldatagridelement：htmlelement {
属性datagriddataproviderデータ。
readonly属性datagridselection選択。
属性ブール倍。
属性Boolean Disabled;
void updateeverything（）;
void updaterowsChanged（列の列の行、署名のない長いカウント）;
void updaterowsIntered（rowspecification row、in signed long count）;
void updaterowsRemoved（rowspecification row、in signed long count）;
void updaterowchanged（rowspecification row）;
void updateColumnChanged（符号なしの長い列）;
void updateCellChanged（列の列の行、署名されていない長い列）;
};
DOMを使用して、グリッドにデータを動的にロードすることもできます。つまり、Datagridには、初期データを提供する子供が含まれていない場合があります。 DatagridDataproviderオブジェクト（コード11 DatagridDataprovider）で設定できます。これにより、データベース、xmlhttprequest、またはjavaScriptコードでアクセスできる任意のリソースからデータをロードできます。
インターフェイスdatagriddataprovider {
void initialize（in htmldatagridelement datagrid）;
符号なしの長いGetRowCount（rowspecification row）;
署名されていない長いgetChildatsition（rowspecification parentrow、
署名されていない長い位置）;
unsigned long getColumnCount（）;
domstring getCaptionText（署名のない長い列）;
void getCaptionClasses（符号なしの長い列、DomTokenListクラスで）;
domstring getRowimage（rowspecification row）;
htmlmenuelement getrowmenu（rowspecification row）;
void getRowClasses（rowspecification row、domtokenlistクラスで）;
domstring getcelldata（列の列の行、署名されていない長い列）;
void getCellClasses（列の科学行、符号なしの長い列で、
DomTokenListクラス）;
void togglecolumnsortState（符号なしの長い列）;
void setcellcheckedState（列の列の行、署名されていない長い列で、
長い状態）;
void cyclecell（列の科学列、署名されていない長い列）;
void editcell（rowspecification row、unsigned long column、domstringデータ）;
};
メニューとコマンド
メニュー要素は実際にはHTML 2に表示されます。HTML4で放棄されましたが、HTML 5はそれを復元し、新しい意味を指定しました。 HTML 5では、メニューにはコマンド要素が含まれ、各コマンド要素は操作をスローします。たとえば、コード12 HTML 5メニューは、警告ボックスのポップアップを備えたメニューです。
<メニュー>
<command onclick = alert（ 'first command'）label = do 1st command/>
<command onclick = alert（ 'second command'）label = do 2nd command/>
<command onclick = alert（ 'third command'）label = do 3rd command/>
</メニュー>
Checked = Checkedプロパティを使用して、コマンドをチェックボックスに変換することもできます。 Radiogroupプロパティを指定することにより、チェックボックスをラジオボタンに変換できます。このプロパティの値は、相互に排他的なボタンのグループ名です。
シンプルなコマンドリストに加えて、メニュー要素を使用してツールバーまたはポップアップコンテキストメニューを作成することもできます。これには、タイププロパティをツールバーまたはポップアップに設定する必要があります。たとえば、コード13。HTML5ツールバーには、WordPressなどのブログエディターと同様のツールバーが表示されます。アイコンプロパティを使用して、ボタンの画像にリンクします。
<メニュータイプ=ツールバー>
<コマンドonclick = inserttag（buttons、0）;ラベル=強いアイコン= bold.gif/>
<command onclick = inserttag（buttons、1）;ラベル= emアイコン= italic.gif/>
<command onclick = insertLink（buttons、2）; label = link icon = link.gif/>
<command onclick = insertTag（ボタン、3）;ラベル= b-quoteアイコン= blockquote.gif/>
<command onclick = insertTag（ボタン、4）; label = del Icon = del.gif/>
<command onclick = insertTag（ボタン、5）;ラベル= insアイコン= insert.gif/>
<コマンドonclick = insertimage（bottons）; label = img icon = image.gif/>
<command onclick = inserttag（buttons、7）; label = ul icon = bullet.gif/>
<command onclick = insertTag（ボタン、8）;ラベル= olアイコン= number.gif/>
<コマンドonclick = inserttag（buttons、9）; label = li icon = item.gif/>
<command onclick = inserttag（buttons、10）; label = code icon = code.gif/>
<command onclick = insertTag（ボタン、11）; label = cite icon = cite.gif/>
<コマンドonclick = inserttag（buttons、12）; label = abbr icon = abbr.gif/>
<command onclick = insertTag（ボタン、13）; label =頭字語icon = inromany.gif/>
</メニュー>
ラベルプロパティは、メニューのタイトルを提供します。たとえば、コード14。HTML5編集メニュー編集メニューを表示します。
<メニュータイプ=ポップアップラベル=編集>
<コマンドonclick = undo（）label = undo/>
<コマンドonclick = redo（）label = redo/>
<コマンドonclick = cut（）label = cut/>
<コマンドonclick = copy（）label = copy/>
<コマンドonclick = paste（）label = paste/>
<コマンドonclick = delete（）label = clear/>
</メニュー>
メニューは他のメニューにネストして、階層的なメニュー構造を形成できます。