1. ウェブ
  2. HTML
  3. リファレンス
  4. 要素
  5. <data>

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

HTML <data> データ要素

Baseline
広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年10月以降、すべてのブラウザーで利用可能です。

<data> は HTML の要素で、与えられたコンテンツの断片を機械可読な翻訳にリンクします。コンテンツが時刻または日付に関連するものであれば、<time> 要素を使用する必要があります。

試してみましょう

<p>新製品:</p>
<ul>
  <li><data value="398">ミニケチャップ</data></li>
  <li><data value="399">ジャンボケチャップ</data></li>
  <li><data value="400">メガジャンボケチャップ</data></li>
</ul>

data:hover::after {
  content: " (ID " attr(value) ")";
  font-size: 0.7em;
}

属性

この要素の属性にはグローバル属性があります。

value

この属性は、要素の内容の機械可読な翻訳を指定します。

例

以下の例は商品名を表示しますが、それぞれの商品名に商品番号も結びつけます。

html
<p>新製品</p>
<ul>
  <li><data value="398">ミニケチャップ</data></li>
  <li><data value="399">ジャンボケチャップ</data></li>
  <li><data value="400">メガジャンボケチャップ</data></li>
</ul>

結果

技術的概要

コンテンツカテゴリー フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール generic
許可されている ARIA ロール すべて
DOM インターフェイス HTMLDataElement

仕様書

仕様書
HTML
# the-data-element

ブラウザーの互換性

関連情報

  • HTML の <time> 要素

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告