: The Data element - HTML | MDN (original) (raw)

Try it

<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

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 acceptsphrasing content.
Implicit ARIA role	generic
Permitted ARIA roles	Any
DOM interface	HTMLDataElement

Specifications

Specification
HTML # the-data-element