html element

`<data>` HTML data element

The <data> HTML element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the <time> element must be used.

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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

Attributes

This element’s attributes include the global attributes.

value
- : This attribute specifies the machine-readable translation of the content of the element.

Examples

The following example displays product names but also associates each name with a product number.

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

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Technical summary

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Phrasing content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	`generic`
Permitted ARIA roles	Any
DOM interface	[`HTMLDataElement`](/firefox/mdn/api/htmldataelement/)

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.