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 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 object Tag: How to Embed External Objects with Examples

Use the HTML object tag to embed different types of external files into your webpage. It works for videos and…

HTML progress Tag: How to Create Progress Bars with Examples

The <progress> tag in HTML shows task completion. It gives users visual feedback as the task runs. Understand the <progress>…

Component-driven HTML Guide with Examples

This guide shows how to build HTML with separate parts as components and how each part helps in reuse and…

HTML Data Attributes with Examples

data-* attributes store extra values on elements without an extra DOM nodes or backend requests. What are data-* attributes in…

The hidden Attribute in HTML: How it Works with Examples

The HTML hidden attribute hides elements from users but keeps them in the code. You can use it when you…

HTML video Tag: How to Embed Video in a Web Page

The video tag in HTML plays video files directly in the browser. It adds custom playback without third-party services or…

HTML Attributes with Examples for Beginners

HTML attributes add extra detail to elements so the browser knows how to handle them. Here you will see examples…

HTML style Tag: Inline CSS

The style tag in HTML defines CSS inside a web page. Click to see how it works with syntax and…

HTML dialog Tag: How to Create Dialog Boxes

The <dialog> tag is used to build modal popups in HTML. It shows alerts and messages without third-party scripts. Understand…

Previous Article

HTML figure Tag: Responsive Design & Media Elements

Next Article

HTML dialog Tag: How to Create Dialog Boxes

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.