← Back to All Tags

<data>

Adds a machine-readable translation of a given content

✨ HTML5

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

The <data> tag is supported in all major browsers:

Chrome
Chrome
62.0+
Firefox
Firefox
22.0+
Safari
Safari
10.0+
Edge
Edge
18.0+
Opera
Opera
49.0+

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

data {
  display: inline;
}

Related Tags