Description

HTML element <data> is used to link a machine-readable translation of the human-readable content.

The machine-readable translation value is used by data processors, whereas the content is human-readable and used for rendering in the browsers.

If the content is related to time or date, then use the <time> element instead of the <data> element, which makes it more specific.

The below table summarizes its usage.

Usage Details
Placement It is displayed as an Inline element.
Contents It can contain Inline elements and text.
Tags Both opening and closing tags are required.
Versions HTML5

Syntax

Here is the basic syntax of the <data> element.

<data value="machine-readable-value">
    human-readable-value
</data>

Examples

In the below example, the <data> elements are used to specify product IDs for the products listed.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Element - data</h1>
    <ul>
        <li><data value="1001">Bread</data></li>
        <li><data value="1002">Butter</data></li>
        <li><data value="1003">Jam</data></li>
    </ul>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <data> tag.

Attribute Type Details
Element-Specific Attributes The tag <data> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <data> supports the HTML Global Attributes.
Event Attributes The tag <data> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <data> element.

Attribute Value Description
value machine-readable value Specifies the machine-readable translation of the element's content.

Browser Compatibility

The tag <data> is supported in all modern browsers.

  • Google Chrome 62+
  • Internet Explorer or Edge 13+
  • Firefox 22+
  • Apple Safari 10+
  • Opera 49+

Related Links