HTML <data> 元素将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 {{HTMLElement("time")}}。

{{InteractiveExample("HTML Demo: <data>", "tabbed-shorter")}}

```html interactive-example

New Products:

  • Mini Ketchup
  • Jumbo Ketchup
  • Mega Jumbo Ketchup


```css interactive-example
data:hover::after {
  content: " (ID " attr(value) ")";
  font-size: 0.7em;
}
Content categories Flow content, phrasing content, palpable content.
Permitted content Phrasing content.
标签省略 不允许，开始标签和结束标签都不能省略。
Permitted parents Any element that accepts phrasing content.
DOM 接口 HTMLDataElement

属性

该元素支持全局属性。

  • value
    • : 该属性指定元素内容所对应的数据，或者说“机器可读的翻译”。

示例

下面的示例展示了一些产品名称，而且每个名称都和一个产品编码相关联。

<p>新产品</p>
<ul>
  <li><data value="398">迷你番茄酱</data></li>
  <li><data value="399">巨无霸番茄酱</data></li>
  <li><data value="400">超级巨无霸番茄酱</data></li>
</ul>