htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<data>

Adds a machine-readable translation of a given content

✨ HTML5

Quick Answer

What is the HTML <data> tag?

The <data> tag links content with a machine-readable value using the value attribute. It's useful for product codes, measurements, or data that needs both human-readable display text and computer-processable values. This HTML5 element enhances structured data for search engines and scripts without affecting visual presentation.

Definition and Usage

The <data> tag is used to add a machine-readable translation of a given content.

This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser.

Common use cases for the <data> element:

  • Product codes and SKUs in e-commerce
  • Measurement values with units
  • Item IDs and reference numbers
  • Prices with currency codes
  • Custom identifiers for data processing
  • SEO and structured data markup
Tip: The <data> element is useful when you need to provide a value that is machine-readable while displaying different content to users.
Note: If the content is time- or date-related, use the <time> element instead.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

Required Attribute

Attribute Value Description
value machine-readable format Specifies the machine-readable translation of the content

The <data> tag also supports the Global Attributes in HTML.

The <data> tag also supports the Event Attributes in HTML.

Examples

Product Code

Display product name with machine-readable product code:

Example

<p>Product: <data value="SKU-12345">Wireless Headphones</data></p>

Price with Currency Code

Display price with machine-readable currency code:

Example

<p>Price: <data value="USD">$</data><data value="29.99">29.99</data></p>

Measurements

Add machine-readable values to measurements:

Example

<p>Screen Size: <data value="15.6">15.6 inches</data></p>
<p>Weight: <data value="1.8">1.8 kg</data></p>
<p>Storage: <data value="512">512 GB</data></p>

Product List with IDs

Create a product list with machine-readable IDs:

Example

<ul>
  <li><data value="PROD-001">Laptop Computer</data></li>
  <li><data value="PROD-002">Wireless Mouse</data></li>
  <li><data value="PROD-003">USB-C Cable</data></li>
  <li><data value="PROD-004">External Monitor</data></li>
</ul>

E-commerce Product Card

Complete product card with machine-readable data:

Example

<article>
  <h3><data value="LAPTOP-PRO-2025">Professional Laptop 2025</data></h3>
  <p>SKU: <data value="SKU-LP-2025-001">LP-2025-001</data></p>
  <p>Price: <data value="1299.99">$1,299.99</data></p>
  <p>Rating: <data value="4.8">4.8 out of 5 stars</data></p>
  <p>In Stock: <data value="25">25 units</data></p>
</article>

Custom Identifiers

Use custom identifiers for data processing:

Example

<p>Order ID: <data value="ORD-2025-001234">#001234</data></p>
<p>Customer: <data value="CUST-789456">John Smith</data></p>
<p>Status: <data value="2">Shipped</data></p>

JavaScript Access

Access machine-readable values with JavaScript:

Example

<p>Product: <data id="product" value="SKU-12345">Wireless Headphones</data></p>

<script>
  const dataElement = document.getElementById('product');
  console.log(dataElement.value); // Output: SKU-12345
  console.log(dataElement.textContent); // Output: Wireless Headphones
</script>

Data vs Time Element

  • <data>: For general machine-readable values (product codes, IDs, measurements, prices)
  • <time>: Specifically for dates and times (publication dates, event times, durations)

When to Use Each

<!-- Use <data> for product codes -->
<data value="SKU-12345">Product Name</data>

<!-- Use <time> for dates -->
<time datetime="2025-01-15">January 15, 2025</time>

Use Cases

E-commerce

  • Product SKUs and model numbers
  • Price values for currency conversion
  • Inventory quantities
  • Product ratings and review counts

Data Processing

  • Order tracking numbers
  • Customer IDs
  • Status codes
  • Category identifiers

SEO

  • Structured data for search engines
  • Rich snippets enhancement
  • Product schema markup
  • Improved data indexing

Try it Yourself

Interactive Example

Here's a live example of the data element:

Product Details

Product: Professional Laptop 2025

SKU: LP-2025-001

Price: $1,299.99

Rating: 4.8 / 5.0

Best Practices

  • Always include the value attribute - it's required
  • Use <data> for non-temporal data, <time> for dates and times
  • Keep machine-readable values consistent and standardized
  • Use appropriate formats (ISO codes, SKUs, IDs) for the value attribute
  • Combine with microdata or schema.org markup for enhanced SEO
  • Make human-readable content clear and user-friendly
  • Use JavaScript to access the value property when needed

Default CSS Settings

Most browsers will display the <data> element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

data {
  display: inline;
}

Related Tags