HTML <data> Tag

The <data> tag is an HTML element that provides a way to embed machine-readable data into your HTML content. It links a piece of human-readable content with a corresponding data value that a browser or other applications can understand and process. This makes it easier for scripts and other tools to extract and utilize relevant information.

Syntax

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

Attributes

Example

<p>The price of <data value="29.99">the product</data> is $29.99</p>

More Examples

Example 1: Product Information

Here, the <data> tag is used to associate a product's ID with its name. This is useful when using JavaScript or other technologies to reference products by their unique identifiers.

<ul>
    <li><data value="product123">Awesome T-Shirt</data></li>
    <li><data value="product456">Cool Jeans</data></li>
    <li><data value="product789">Stylish Hat</data></li>
</ul>

Example 2: Event Details

In this example, event dates are displayed, but the value attribute provides the date in ISO format, which is more machine-friendly for calendars and automated systems.

<p>Event Date: <data value="2024-03-15">March 15, 2024</data></p>

Example 3: Using with JavaScript

The real power of the <data> element is when used with JavaScript. You can access the machine-readable value with element.value. Here's a simple example demonstrating that.

<p id="price-tag">The price of <data id="product-price" value="29.99">the product</data> is $29.99</p>

<script>
  const productPrice = document.getElementById('product-price');
  const priceValue = productPrice.value;
  alert("The machine-readable price is: " + priceValue);
</script>

Example 4: Integrating with Microdata

The <data> tag can also enhance microdata implementations, providing both human-readable and machine-interpretable data within schema.org vocabulary.

<div itemscope itemtype="https://schema.org/Product">
  <h3 itemprop="name">
    <data itemprop="productID" value="product-alpha-123">Awesome T-Shirt</data>
  </h3>
  <p>
     Price: <data itemprop="price" value="29.99">$29.99</data>
  </p>
</div>

Browser Support

The <data> tag is supported by all modern browsers:

Notes and Tips

• The value attribute is required. The <data> tag is invalid if the value is missing.
• The <data> element is not visually rendered in a special way. Use it to add machine-readable information behind the scenes.
• The value attribute’s value is treated as a string. If you need to store numbers, dates or other types, you should serialize/deserialize them in your JavaScript code.
• It's designed for associating single data points with elements, not for complex data structures. For complex data, consider other methods such as JSON or data-* attributes.
• Always prefer semantic HTML. If the data can also be included with another semantic tag like use that instead of tag. Use data tag only when there is no other fitting element.
• The <data> tag is particularly useful for web applications that need to exchange data programmatically with servers or other components.
• Use the id attribute if you intend to reference it in JavaScript using getElementById.
• Use it alongside other semantic markup, such as microdata or RDFa, to further enhance the machine-readability of your data.
• The <data> element enhances accessibility for users using assistive technologies because of its ability to convey context and data associations which screen readers can make use of.
• It is a valuable tool for implementing structured data in your HTML.
• Keep your data values consistent and well-formatted to ensure reliable interpretation.