HTML data Tag: Machine-Readable Data

The data tag connects visible content with a machine-readable value in HTML. This helps browsers and tools understand and process the data.

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:

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

Similar Reads