HTML <data> Tag

The HTML <data> tag is used to associate machine-readable data with human-readable content. It is particularly useful for embedding additional context or metadata into text elements, such as numbers, product identifiers, or other data that software might interpret differently than humans.

The <data> tag contains two parts:

  • The human-readable content, displayed on the page.
  • The machine-readable content, specified in the value attribute.

This tag is useful in applications such as search engine optimization (SEO), data analysis, or when working with JavaScript to extract or manipulate structured data.

Basic Syntax of <data> Tag

The <data> tag is written as:

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

Attributes of HTML <data> Tag

  • value: A required attribute that contains the machine-readable content associated with the human-readable text.

Basic Example of HTML <data> Tag

Here’s an example demonstrating the use of the <data> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Example</h2>
        <p>The price of the product is <data value="1000">$1,000</data>.</p>
    </body>
</html>

Explanation: In this example, the human-readable text $1,000 is associated with the machine-readable data 1000. A program or script can extract the numeric value for further processing.

When to Use the <data> Tag?

  • Metadata Association: When you want to associate specific metadata with visible content, such as product IDs, dates, or reference numbers.
  • SEO and Accessibility: Search engines and assistive technologies can better interpret content when machine-readable data is provided.
  • JavaScript Applications: To store and manipulate structured data for dynamic content generation or calculations.

Advanced Examples of HTML <data> Tag

1. Example with Product Identifiers

The <data> tag can associate a product name with a unique identifier:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Product Example</h2>
        <p>Product: <data value="SKU12345">Wireless Mouse</data></p>
    </body>
</html>

Explanation: The human-readable product name Wireless Mouse is paired with the machine-readable SKU SKU12345, which can be used for tracking or database lookups.

2. Using JavaScript to Extract Data

You can use JavaScript to extract the machine-readable data from the <data> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>JavaScript Example</h2>
        <p>The discount is <data id="discount" value="10">10%</data></p>

        <script>
            const discountData = document.getElementById('discount');
            console.log('Machine-readable value:', discountData.value);
        </script>
    </body>
</html>

Explanation: In this example, JavaScript extracts the value 10 from the <data> tag and logs it to the console. This is useful for dynamic calculations or API interactions.

3. Displaying Dates with Machine-Readable Formats

The <data> tag can be used to provide ISO 8601 date formats alongside human-readable dates:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Date Example</h2>
        <p>Event Date: <data value="2024-12-31">December 31, 2024</data></p>
    </body>
</html>

Explanation: The machine-readable date 2024-12-31 (ISO 8601 format) is paired with the human-readable date December 31, 2024, improving compatibility with scripts and systems that process dates.

Styling the <data> Tag

Like other inline elements, the <data> tag can be styled using CSS:

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            data {
                font-weight: bold;
                color: #007BFF;
            }
        </style>
    </head>
    <body>
        <h2>Styled Data Tag</h2>
        <p>The temperature is <data value="25">25°C</data>.</p>
    </body>
</html>

Result: The text inside the <data> tag appears bold and blue, highlighting its significance.

Notes About <data> Tag

  • Ensure the value attribute always contains valid machine-readable content, as its primary purpose is for programmatic use.
  • The <data> tag is an inline element by default, so it behaves like <span> in terms of layout.
  • Although useful, the <data> tag is not as commonly used as other semantic tags, so its application might be niche depending on the project.