HTML data Tag: Machine-Readable Data

html data tag

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:

Feature
SemanticsAdds machine-readable valueNo semantics
Use caseFor data extractionFor inline styles only
Attribute supportSupports value attributeNo built-in value support
Machine readabilityYesNo

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?

The <data> tag links a visible label to a machine-readable value using the value attribute.

Can I use CSS to style <data>?

Yes. You style <data> like any other inline element using standard CSS rules.

How does <data> differ from <span>?

<data> provides a machine-readable value. <span> only affects how text looks. It carries no value.

What value format should I use in <data value="">?

Use a clean, parsable format. Use floats for prices, ISO for dates, or strings for IDs.

Similar Reads

HTML tabindex Attribute: How it Works with Examples

The HTML tabindex Attribute lets you change the tab order on a web page. It helps control keyboard access. What…

HTML Small Tag: How to Make Text Small

The HTML small tag displays text in a smaller font size than nearby text. It shows less important or side…

How to Use HTML div Tag – Examples & Group Content

In this article, you will cover how to use div tag in HTML layout. It offers beginner to advanced code…

HTML Section Tag: How It Works with Examples

The HTML section tag groups parts of a web page that share one theme. It gives clear meaning to content.…

HTML address Tag: Contact Information

The address tag in HTML shows contact details. The <address> tag helps show who owns the page or article. Understand…

HTML pre Tag: How to Display Preformatted Text

The HTML <pre> tag keeps the original format of your text. It shows spaces and line breaks exactly as you…

HTML audio Tag: How to Embed and Control Sound in Pages

The audio tag adds sound to web pages without plugins. It gives you control to play, pause, loop, or mute…

HTML Mark Tag: How to Highlight Text

The mark tag highlights text in HTML and shows that the text has relevance in the content. It adds a…

HTML main Tag: How to Create a Primary Content Area

The <main> tag in HTML marks the central content of a webpage. It tells browsers and assistive technologies where the…

HTML Nav Tag: How to Create Navigation Menus

The nav tag defines a navigation block in HTML. It holds main links to other parts of your site. Search…

Previous Article

HTML figure Tag: Responsive Design & Media Elements

Next Article

HTML details Tag: How to Toggle Hidden Content

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *


Subscribe to Get Updates

Get the latest updates on Coding, Database, and Algorithms straight to your inbox.
No spam. Unsubscribe anytime.