トップページ  > HTML Living Standard  > <data>

★HTML Living Standard リファレンス

<data> …… 何らかのデータを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<data>タグは、何らかのデータを表す際に使用します。

data要素は、人間が読める値と機械が読める値の両方を提供します。 要素内容に人間が読める値を指定して、value属性の値に機械が読める値を指定することで、 data要素をスクリプトと組み合わせて使用する際などに役立つでしょう。

data要素には、value属性が必須です。 data要素のvalue属性の値には、data要素の要素内容を機械が読める形式にしたものを指定します。 そのため、data要素の要素内容にできるのは、機械が読める形式で表すことができるデータに限られます。

■属性

value属性
要素内容を機械が読める形式にしたものを指定します。

■使用例

以下のサンプルでは、date要素のvalue属性で機械的に処理できる数値を与えています。 例えば、JavaScriptでテーブル行のソート機能を提供したい場合などに、 date要素のvalue属性の値が役立つでしょう。

HTMLソース

<script src="sortable.js"></script>
<table class="sortable">
 <thead>
  <tr>
   <th>名前</th>
   <th>順位</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>太郎</td>
   <td><data value="38">全国38位</data></td>
  </tr>
  <tr>
   <td>花子</td>
   <td><data value="99">全国99位</data></td>
  </tr>
  <tr>
   <td>次郎</td>
   <td><data value="149">全国149位</data></td>
  </tr>
 </tbody>
</table>
↓↓↓

ブラウザ上の表示

名前 順位
太郎 全国38位
花子 全国99位
次郎 全国149位

日付や時間にはtime要素

日付や時刻に関連するデータの場合には、 data要素よりもtime要素を使用する方がより具体的な指定となります。

■使用例

以下のサンプルでは、time要素のdatetime属性を使用して、この「金曜日」が「2011年11月18日」対応していることが示されています。

HTMLソース

今日は、<time datetime="2011-11-18">金曜日</time>です。
↓↓↓

ブラウザ上の表示

今日は、です。

■関連項目

  • <progress> …… タスクの進行状況を表す
  • <meter> …… 既知の範囲内の測定値を表す
  • <output> …… 実行結果の出力を表す
  • <samp> …… コンピューターからの出力サンプルを表す
  • <data> …… 何らかのデータを表す
  • <time> …… 日付や時刻に関連するデータを表す
  • <mark> …… 参照目的で強調表示されたテキストを表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ