ContextQMD
Back to Content

: The Data element

files/en-us/web/html/reference/elements/data/index.md

latest2.8 KB
Original Source

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

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

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

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>

Result

{{EmbedLiveSample('Examples')}}

Technical summary

<table class="properties"> <tbody> <tr> <th scope="row"> <a href="/en-US/docs/Web/HTML/Guides/Content_categories" >Content categories</a > </th> <td> <a href="/en-US/docs/Web/HTML/Guides/Content_categories#flow_content" >Flow content</a >, <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content" >phrasing content</a >, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content" >Phrasing content</a >. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content" >phrasing content</a >. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <code ><a href="/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/generic_role" >generic</a ></code > </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td>{{domxref("HTMLDataElement")}}</td> </tr> </tbody> </table>

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

  • The HTML {{HTMLElement("time")}} element.