HTML5 & CSS3Tools and Tutorials
Tutorials, tools, and live experimentsOpen Tools

Tutorial Article

HTML <data> Tag

The <data> tag is used to associate machine-readable data with human-readable content.It allows the browser or scripts to understand the value of a text while still displaying a friendly version to users. Syntax Attributes Attribute Description value Specifies the machine-readable value associated with the content. (Global Attributes) class, id, style, title, etc. can also be [&hellip;]

Nov 21, 2025HTMLHTML TagsTutorials

The <data> tag is used to associate machine-readable data with human-readable content.
It allows the browser or scripts to understand the value of a text while still displaying a friendly version to users.

Syntax

<data value="machine-readable-value">Human-readable text</data>

Attributes

AttributeDescription
valueSpecifies the machine-readable value associated with the content.
(Global Attributes)class, id, style, title, etc. can also be used.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML data Tag Example</title>
</head>
<body>
  <h2>HTML &lt;data&gt; Tag Example</h2>

  <p>The price of the product is <data value="599">₹599</data>.</p>
  <p>My birth year is <data value="1990">1990</data>.</p>
</body>
</html>

Output

Browser Output

The human-readable text (e.g., ₹599 or 1990) is displayed in the browser, while the machine-readable value can be accessed via scripts.

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
✅Yes✅Yes✅Yes✅Yes✅Yes✅Yes

Only the human-readable content is displayed; the value attribute is for scripts or programs.

Notes

  • <data> is semantic and improves accessibility and SEO by providing machine-readable values.
  • Can be used with JavaScript for calculations, data processing, or structured content.
  • Works well for dates, numbers, currency, or any data that needs to be machine-readable but human-friendly.

Conclusion

The <data> tag allows developers to link human-readable text with a machine-readable value, enhancing semantic meaning and interactivity without changing what the user sees.