<data>: データ要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017年10月⁩.

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

試してみましょう

<p>New Products:</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

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

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

属性

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

value: この属性は要素の内容を機械可読な形式で指定します。

例

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

html

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