<data>：資料元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

<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;
}

屬性

此元素的屬性包括全域屬性。

value

此屬性指定元素內容所對應的機器可讀的翻譯。

範例

以下範例顯示產品名稱，但還將每個名稱與產品編號關聯起來。

html
<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>

結果

技術摘要

內容類型 流內容、段落型內容、捫及內容。
允許的內容 段落型內容。
標籤省略 不允許，開始和結束標籤都是必須的。
允許的父元素 任何接受段落型內容的元素。
隱含的 ARIA 角色 generic
允許的 ARIA 角色 任何
DOM 介面 HTMLDataElement

規範

Specification
HTML
# the-data-element

瀏覽器相容性

參見