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
| Attribute | Description |
|---|---|
value | Specifies 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 <data> 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 |  Firefox |  Edge |  Safari |  Opera |  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.
