The data tag connects visible content with a machine-readable value in HTML. This helps browsers and tools understand and process the data.
Table of Content
Understand the HTML <data> Tag
The <data> tag links a machine-readable value with a human-readable label. It appears in lists and labels. Also, it appears in other places where visual content hides structured data.
Here is the syntax:
<data value="machine-readable-value">Human-readable label</data>
The value attribute carries the raw data. The content between tags shows the text to users.
Use to store values that scripts or applications need. It helps browsers and crawlers find structured data. You can link a label with its actual data.
You place them inside lists or tables. It does not affect how the content looks.
The value attribute stores the real data. The browser does not display this value. It shows the text inside the <data> tag instead.
Scripts or crawlers read the value attribute. They use it to sort or filter structured content.
The content between tags shows a readable label. The value attribute gives the machine a structured format.
For example:
<data value="199.99">$199.99</data>
The label uses currency symbols. The value keeps the number raw for scripts.
The Difference Between <data>
and <span>
It pairs a visible label with a hidden value. only controls how content looks. Helps crawlers read content. Does not support machine-readable values.
Here is a table that shows you the key differences:
Feature | ||
---|---|---|
Semantics | Adds machine-readable value | No semantics |
Use case | For data extraction | For inline styles only |
Attribute support | Supports value attribute | No built-in value support |
Machine readability | Yes | No |
Here is the use case:
- Use it to store prices, IDs, timestamps, or values in lists.
- Use it to apply styles or layout adjustments.
Styles of the <data> Tag with CSS
You can style it like any inline element.
For example:
<style>
data {
color: #2a2a2a;
font-weight: bold;
background-color: #f0f0f0;
padding: 4px;
}
</style>
This sets font and background for any <data> tag on the page.
Examples of <data> tag in HTML
Use to Show Price With Value:
<data value="45.99">$45.99</data>
This shows the price to users but gives the raw float to JavaScript or search engines.
Show Dates in Readable Form:
<data value="2025-07-21">July 21, 2025</data>
This gives the ISO date to crawlers. The label stays friendly for users.
Create a List of IDs With Labels:
<ul>
<li><data value="u001">User One</data></li>
<li><data value="u002">User Two</data></li>
</ul>
This example maps user labels with machine-readable IDs. Scripts can fetch the value easily.
Filter Products by Script:
<div>
<data value="p23">Red T-Shirt</data>
<data value="p24">Blue T-Shirt</data>
</div>
JavaScript uses the value attribute to group or sort products.
Wrapping Up
In this article, you learned how the <data> tag works and how to structure it correctly. You also saw how it differs from and how to style it.
Here is a quick recap:
- Use to pair a value with a label.
- Use the value attribute for machine-readable data.
- Style with normal CSS.
- Use only for inline styles.
FAQs
What does the <data> tag do in HTML?
Can I use CSS to style <data>?
How does <data> differ from <span>?
What value format should I use in <data value="">?
Similar Reads
The HTML tabindex Attribute lets you change the tab order on a web page. It helps control keyboard access. What…
The HTML small tag displays text in a smaller font size than nearby text. It shows less important or side…
In this article, you will cover how to use div tag in HTML layout. It offers beginner to advanced code…
The HTML section tag groups parts of a web page that share one theme. It gives clear meaning to content.…
The address tag in HTML shows contact details. The <address> tag helps show who owns the page or article. Understand…
The HTML <pre> tag keeps the original format of your text. It shows spaces and line breaks exactly as you…
The audio tag adds sound to web pages without plugins. It gives you control to play, pause, loop, or mute…
The mark tag highlights text in HTML and shows that the text has relevance in the content. It adds a…
The <main> tag in HTML marks the central content of a webpage. It tells browsers and assistive technologies where the…
The nav tag defines a navigation block in HTML. It holds main links to other parts of your site. Search…