<data> - The Data Element

The `<data>` Element

Inline HTML5

The data element links content with a machine-readable translation via the value attribute, making it useful for automated data processing while displaying human-readable content.

Quick Example

<p>Product: <data value="SKU-12345">Premium Laptop</data></p>
<p>Price: <data value="999.99">$999.99</data></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Product: <data value="SKU-12345">Premium Laptop</data></p>
<p>Price: <data value="999.99">$999.99</data></p>

Syntax

<data value="machine-readable-value">Human readable content</data>

The value attribute contains data in a format suitable for automated processing, while the element content shows what users see.

Attributes

Required Attributes

Attribute	Description	Example
`value`	Machine-readable value	`"SKU-12345"`, `"999.99"`

Common Use Cases

Product SKUs

<ul>
<li><data value="SKU-001">Wireless Mouse</data> - $29.99</li>
<li><data value="SKU-002">Mechanical Keyboard</data> - $89.99</li>
<li><data value="SKU-003">USB-C Cable</data> - $12.99</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<ul>
<li><data value="SKU-001">Wireless Mouse</data> - $29.99</li>
<li><data value="SKU-002">Mechanical Keyboard</data> - $89.99</li>
<li><data value="SKU-003">USB-C Cable</data> - $12.99</li>
</ul>

Product IDs in Shopping Lists

<h3>Shopping Cart</h3>
<ul>
<li>
  <data value="PROD-7829">Blue T-Shirt (Large)</data>
  - Quantity: 2
</li>
<li>
  <data value="PROD-5612">Running Shoes (Size 10)</data>
  - Quantity: 1
</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Shopping Cart</h3>
<ul>
<li>
  <data value="PROD-7829">Blue T-Shirt (Large)</data>
  - Quantity: 2
</li>
<li>
  <data value="PROD-5612">Running Shoes (Size 10)</data>
  - Quantity: 1
</li>
</ul>

Numeric Values

<p>Temperature: <data value="23.5">23.5°C</data></p>
<p>Distance: <data value="42.195">42.195 km</data></p>
<p>Score: <data value="95">95%</data></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Temperature: <data value="23.5">23.5°C</data></p>
<p>Distance: <data value="42.195">42.195 km</data></p>
<p>Score: <data value="95">95%</data></p>

Order Numbers

<p>Order #<data value="ORD-2024-001234">2024-001234</data> has been shipped.</p>
<p>Tracking: <data value="1Z999AA10123456784">1Z999AA10123456784</data></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Order #<data value="ORD-2024-001234">2024-001234</data> has been shipped.</p>
<p>Tracking: <data value="1Z999AA10123456784">1Z999AA10123456784</data></p>

Custom Identifiers

<article>
<h2>Blog Post</h2>
<p>Author: <data value="user-12345">Jane Smith</data></p>
<p>Category: <data value="cat-tech">Technology</data></p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h2>Blog Post</h2>
<p>Author: <data value="user-12345">Jane Smith</data></p>
<p>Category: <data value="cat-tech">Technology</data></p>
</article>

Color Codes

<ul>
<li><data value="#FF0000">Red</data></li>
<li><data value="#00FF00">Green</data></li>
<li><data value="#0000FF">Blue</data></li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<ul>
<li><data value="#FF0000">Red</data></li>
<li><data value="#00FF00">Green</data></li>
<li><data value="#0000FF">Blue</data></li>
</ul>

Rating Systems

<p>
Rating:
<data value="4.5">
  ⭐⭐⭐⭐☆ (4.5 out of 5)
</data>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
Rating:
<data value="4.5">
  ⭐⭐⭐⭐☆ (4.5 out of 5)
</data>
</p>

<!-- General machine-readable values -->
<data value="SKU-12345">Premium Widget</data>
<data value="99.99">$99.99</data>

Use for product codes, prices, IDs, and other non-date values.

<!-- Specifically for dates and times -->
<time datetime="2024-12-11">December 11, 2024</time>
<time datetime="14:30">2:30 PM</time>

Use specifically for dates, times, and durations.

JavaScript Integration

The value attribute is accessible via JavaScript:

<button onclick="showValue()">
<data id="product" value="SKU-99999">Click Me</data>
</button>

<p id="result"></p>

<script>
function showValue() {
const data = document.getElementById('product');
document.getElementById('result').textContent =
  'Product ID: ' + data.value;
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<button onclick="showValue()">
<data id="product" value="SKU-99999">Click Me</data>
</button>

<p id="result"></p>

<script>
function showValue() {
const data = document.getElementById('product');
document.getElementById('result').textContent =
  'Product ID: ' + data.value;
}
</script>

Styling

The <data> element has no default styling:

<style>
data {
  font-weight: 600;
  color: #0066cc;
  border-bottom: 1px dotted #ccc;
  cursor: help;
}
data:hover::after {
  content: ' (ID: ' attr(value) ')';
  font-size: 0.8em;
  color: #666;
}
</style>

<p>Product: <data value="SKU-12345">Laptop Computer</data></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
data {
  font-weight: 600;
  color: #0066cc;
  border-bottom: 1px dotted #ccc;
  cursor: help;
}
data:hover::after {
  content: ' (ID: ' attr(value) ')';
  font-size: 0.8em;
  color: #666;
}
</style>

<p>Product: <data value="SKU-12345">Laptop Computer</data></p>

E-commerce Example

<article class="product">
<h3><data value="PROD-8472">Wireless Headphones</data></h3>
<p>Price: <data value="149.99">$149.99</data></p>
<p>Stock: <data value="25">25 units available</data></p>
<p>Color: <data value="color-black">Matte Black</data></p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article class="product">
<h3><data value="PROD-8472">Wireless Headphones</data></h3>
<p>Price: <data value="149.99">$149.99</data></p>
<p>Stock: <data value="25">25 units available</data></p>
<p>Color: <data value="color-black">Matte Black</data></p>
</article>

Accessibility

Screen readers read the visible content, not the value attribute. The machine-readable value is only for automated processing.

Provide Clear Content

Make sure the visible content is meaningful to humans:

Poor
Better

<!-- Confusing to users -->
<data value="PROD-12345">12345</data>

<!-- Clear and descriptive -->
<data value="PROD-12345">Premium Wireless Mouse</data>

When Not to Use

Don’t use <data> for purely presentational purposes:

<!-- Wrong: no machine processing benefit -->
<data value="red">Red</data>

<!-- Better: just use plain text or CSS -->
<span class="color-red">Red</span>

Use Cases Summary

Scenario	Example
Product IDs	`<data value="SKU-123">Widget</data>`
Prices	`<data value="99.99">$99.99</data>`
Order numbers	`<data value="ORD-456">Order 456</data>`
User IDs	`<data value="user-789">John</data>`
Color codes	`<data value="#FF0000">Red</data>`
Ratings	`<data value="4.5">⭐⭐⭐⭐☆</data>`

Browser Support

Browser	Version	Notes
Chrome	62+	Full support
Firefox	22+	Full support
Safari	10+	Full support
Edge	79+	Full support
IE	No	Not supported

The <data> element is an HTML5 feature with good modern browser support.

For dates, times, and durations with machine-readable format. Learn more →

For metadata in the document head. Learn more →

<data> - The Data Element

The <data> Element

Quick Example

Syntax

Attributes

Required Attributes

Common Use Cases

Product SKUs

Product IDs in Shopping Lists

Numeric Values

Order Numbers

Custom Identifiers

Color Codes

Rating Systems

<data> vs <time>

JavaScript Integration

Styling

E-commerce Example

Accessibility

Screen Reader Behavior

Provide Clear Content

When Not to Use

Use Cases Summary

Browser Support

Related Elements

Specifications

The `<data>` Element

`<data>` vs `<time>`