HTML5

タグ(要素)

DATA

  編集:2022.06.24 by T.A.

mdn

value 属性でコンテンツの機械可読形式に沿って、その内容を表す。

この要素を使用できる文脈

フレージング内容が期待される場所。

内容モデル

フレージング内容

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性
解説

要素はいくつかの目的に使用できる。

この仕様で定義されるマイクロ フォーマットまたはマイクロ データ属性と組み合わせた場合、要素は、データ プロセッサの目的のために機械可読な値、およびウェブ ブラウザーでレンダリング目的のために人間可読な値の両方を提供する役割を果たす。この場合、value属性で使用されるフォーマットは、使用中のマイクロ フォーマットまたはマイクロ データ語彙によって決定される。

しかし、要素はまた、人間可読な値と一緒に格納するリテラルな値を持つときに、ページ内でスクリプトと併せて使用される。このような場合、使用されるフォーマットは、スクリプトの要求に依存する。(data-* 属性もそのような状況において有用でありうる。)

ここでは、短いテーブルが、1 列のテキスト形式でかつ別に分解された形式で提示された数字にもかかわらず、テーブルソート JavaScript ライブラリーは各列のソート メカニズムを提供することができるように DATA を用いてエンコードされた数値を持つ。

<SCRIPT src="sortable.js"></SCRIPT>
<TABLE class="sortable">
 <THEAD> <TR> <TH> Game <TH> Corporations <TH> Map Size
 <TBODY>
  <TR> <TD> 1830 <TD> <DATA value="8">Eight</DATA> <TD> <DATA value="93">19+74 hexes (93 total)</DATA>
  <TR> <TD> 1856 <TD> <DATA value="11">Eleven</DATA> <TD> <DATA value="99">12+87 hexes (99 total)</DATA>
  <TR> <TD> 1870 <TD> <DATA value="10">Ten</DATA> <TD> <DATA value="149">4+145 hexes (149 total)</DATA>
</TABLE>

value属性

value 属性が存在しなければならない。その値は、機械可読形式での要素内容の表現でなければならない。


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: