🔤 Chapter 38: Text-Level Semantic Elements

The data Element – Machine-Readable Data

Bridging human UI presentation with machine-readable tokens: mastering the `value` attribute, catalog SKUs, and distinguishing `<data>` from `<time>` and `data-*`.

LEARNING OBJECTIVES ⌵

Understand the semantic role of the <data> element in linking human-readable text with machine-readable values.
Contrast <data> (non-temporal values) with <time> (temporal timestamps) and data-* (custom scripting attributes).
Implement the mandatory value attribute to embed unambiguous catalog SKUs, inventory counts, and scientific IDs.
Integrate <data> with Microdata and Schema.org for automated e-commerce and scraper ingestion.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine browsing a retail inventory dashboard:

A shoe size is displayed to the user as: "Size 10.5 (US Men's)"
The database catalog identifies this item as: SKU: 849204-US105M
The inventory level is displayed as: "In Stock (Few Left)"
The database quantity count is: QTY: 4

Human beings prefer friendly, localized, contextual phrases like "A few left in stock". Automated inventory scrapers, point-of-sale systems, and search engine bots need exact, immutable, standardized identifiers like 4 and 849204-US105M.

+----------------------------------------------------------------------------------------------------+
|                         THE DUAL HUMAN/MACHINE ARCHITECTURE OF <data>                              |
+----------------------------------------------------------------------------------------------------+
|                                                                                                    |
|                       <data value="849204-US105M"> Size 10.5 (US Men's) </data>                     |
|                                     |                     |                                        |
|                     +---------------+                     +---------------+                        |
|                     v                                                     v                        |
|        [ MACHINE DATA VALUE ]                                    [ HUMAN VISUAL UI ]               |
|        - Scrapers, APIs, Bots                                    - Human Shopper                   |
|        - Immutable Primary Key                                   - Localized, Formatted Text       |
|        - "849204-US105M"                                         - "Size 10.5 (US Men's)"          |
|                                                                                                    |
+----------------------------------------------------------------------------------------------------+

The <data> element bridges this gap perfectly. It allows you to display friendly copy to human eyes while embedding clean machine-readable tokens in the value attribute.

Technical Deep Dive & Specifications

WHATWG HTML Living Standard Specification

According to the official WHATWG specification:

"The <data> element links a given piece of content with a machine-readable translation. The value attribute must be specified. The value of this attribute is the machine-readable value of the element's contents."

Element Comparison: `<data>` vs. `<time>` vs. `data-*`

Frontend engineers frequently confuse these three distinct concepts:

                                  +---------------------------+
                                  |     MACHINE DATA TRIAD    |
                                  +---------------------------+
                                                |
          +-------------------+-----------------+-------------------+
          |                   |                 |                   |
          v                   v                 v                   v
      [ <data> ]                          [ <time> ]                          [ data-* ]
  Non-temporal data values            Dates, times, durations,           Custom JS attributes on
  (SKUs, ISBNs, IDs, metrics)         time zones (ISO-8601)              any DOM element node
  e.g., <data value="98.6">           e.g., <time datetime="...">        e.g., <div data-user="12">

Syntax	Category	Mandatory Attribute	Valid Use Case
`<data value="...">`	Semantic HTML Element	`value`	Catalog SKUs, ISBNs, stock ticker symbols, numeric metrics
`<time datetime="...">`	Semantic HTML Element	`datetime`	Publication dates, event times, durations, calendar stamps
`<tag data-key="...">`	HTML Attribute (Dataset)	None (User defined)	Client-side JavaScript state hooks and DOM dataset storage

The Critical Rule: When to Use `<time>` vs. `<data>`

The WHATWG specification strictly mandates:

If the content represents a date, time, or duration, you MUST use <time datetime="...">.
If the content represents any other machine-readable value (e.g., numbers, identifiers, coordinates), you MUST use <data value="...">.

<!-- INVALID: Do not use <data> for dates! -->
<data value="2026-08-21">August 21, 2026</data> ❌

<!-- VALID: Use <time> for dates -->
<time datetime="2026-08-21">August 21, 2026</time> ✅

<!-- VALID: Use <data> for non-temporal data -->
<data value="978-0-13-110362-7">The C Programming Language (2nd Ed)</data> ✅

Microdata & Schema.org Integration

The <data> element is heavily used in Schema.org e-commerce markup to provide clean machine values without invisible <meta> hacks:

<div itemscope itemtype="https://schema.org/Product">
  <h2 itemprop="name">Wireless Mechanical Keyboard</h2>
  <p>Product Code: <data itemprop="sku" value="KB-9920-RGB">KB-9920-RGB</data></p>
  <p>Inventory: <data itemprop="inventoryLevel" value="18">18 units available</data></p>
</div>

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 47: <data class="sku-badge" value="CHR-ERG-091"> — Links the visible SKU text with the machine-readable SKU token.
Line 48: <data value="42">42 units (Optimal)</data> — Human reads friendly status "(Optimal)"; scraper extracts exact integer 42.
Line 49: <data value="14.8">14.8 kg</data> — Machine value standardizes metric units to float 14.8.
Line 60: <data value="0">Out of Stock</data> — Human reads "Out of Stock"; database scraper parses integer 0.
Line 72: node.value — JavaScript property directly accesses the element's value attribute.

Expected Browser Render Output

A clean, responsive data table renders the human-readable product names and stock labels.
The browser console outputs the parsed machine tokens ("42", "14.8", "3", "0"), demonstrating frictionless data extraction.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Machine-Readable Data with the data Element</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      line-height: 1.6;
      max-width: 760px;
      margin: 2rem auto;
      padding: 0 1rem;
      color: #1e293b;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1.5rem;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      border-radius: 8px;
      overflow: hidden;
    }
    th, td {
      padding: 0.75rem 1rem;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
    }
    th {
      background: #f8fafc;
      font-weight: 600;
      color: #475569;
    }
    .sku-badge {
      font-family: ui-monospace, monospace;
      background: #f1f5f9;
      padding: 0.2rem 0.4rem;
      border-radius: 4px;
      font-size: 0.85rem;
    }
  </style>
</head>
<body>

<h1>Warehouse Inventory Management</h1>

<table>
    <thead>
      <tr>
        <th>Product Title</th>
        <th>Catalog SKU</th>
        <th>Stock Level</th>
        <th>Unit Weight</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ergonomic Office Chair</td>
        <td><data class="sku-badge" value="CHR-ERG-091">CHR-ERG-091</data></td>
        <td><data value="42">42 units (Optimal)</data></td>
        <td><data value="14.8">14.8 kg</data></td>
      </tr>
      <tr>
        <td>Ultra-Wide Curved Monitor</td>
        <td><data class="sku-badge" value="MON-4K-UW34">MON-4K-UW34</data></td>
        <td><data value="3">3 units (Low Stock)</data></td>
        <td><data value="8.2">8.2 kg</data></td>
      </tr>
      <tr>
        <td>Mechanical Numpad</td>
        <td><data class="sku-badge" value="ACC-NUM-002">ACC-NUM-002</data></td>
        <td><data value="0">Out of Stock</data></td>
        <td><data value="0.35">350 grams</data></td>
      </tr>
    </tbody>
  </table>

<script>
    // Automated crawlers or JS scripts can extract clean machine data instantly
    const dataNodes = document.querySelectorAll('data');
    console.log(`Found ${dataNodes.length} machine-readable data tokens.`);
    dataNodes.forEach(node => {
      console.log(`Label: "${node.textContent.trim()}" -> Machine Value: "${node.value}"`);
    });
  </script>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

🏋️ Hands-On Exercise

🎯 The Challenge: Library Book Catalog Refactoring

You are upgrading a university digital library catalog. The existing markup stores ISBNs and availability in unsemantic spans and mistakenly uses <data> for publication dates.

Instructions:

Fix the date violation: Replace <data> with <time datetime="..."> on all publication dates.
Refactor book ISBN numbers into semantic <data value="..."> elements.
Refactor book checkout status into <data value="..."> (e.g. value="available" or value="checked-out").
Extract the data values programmatically via the .value DOM property.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>University Library Catalog - Verified Solution</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 2rem auto; color: #1e293b; line-height: 1.6; }
    .book-card { border: 1px solid #cbd5e1; border-radius: 8px; padding: 1.5rem; background: #f8fafc; }
    .status-available { color: #15803d; font-weight: 600; }
  </style>
</head>
<body>

  <article class="book-card" itemscope itemtype="https://schema.org/Book">
    <h2 itemprop="name">Designing Data-Intensive Applications</h2>
    <p>Author: <span>Martin Kleppmann</span></p>

    <!-- Correct: <time> for temporal dates -->
    <p>Published: <time itemprop="datePublished" datetime="2017-03-16">March 16, 2017</time></p>

    <!-- Correct: <data> for ISBN numbers -->
    <p>ISBN-13: <data itemprop="isbn" value="978-1449373320">978-1449373320</data></p>

    <!-- Correct: <data> for machine status code -->
    <p>Status: <data class="status-available" value="available">Available on Shelf (Floor 3)</data></p>
  </article>

</body>
</html>

Why this works:

Dates are strictly assigned to <time datetime="...">, satisfying WHATWG spec rules.
ISBN strings and inventory status strings are cleanly bound with <data value="...">.
Automated crawlers can instantly access machine values via the standard HTML DOM element.value property.

⚠️ Common Pitfalls

Using <data> for Dates and Times: This is a direct violation of the WHATWG specification. Dates, calendar months, and durations MUST use <time datetime="...">.
Omitting the value Attribute: <data> without a value attribute has no machine meaning and fails HTML validation.
Confusing <data> with data-* Attributes: <data> is an inline HTML element node (<data value="10">Ten</data>). data-* is a custom HTML attribute placed on any tag (<div data-product-id="10">).

💡 Pro Tips

Client-Side Framework Data Binding: When rendering tables in React, Svelte, or Vue, binding <data value={item.id}>{item.formattedName}</data> eliminates the need to maintain parallel lookup arrays for clipboard copy actions or analytics click handlers.
Web Scraper & ETL Efficiency: By wrapping catalog identifiers in <data value="...">, data engineering web crawlers can extract structured data via document.querySelectorAll('data').map(el => el.value) in one line of JavaScript without fragile regex parsing.

📌 Key Takeaways

<data> links human-readable text with a machine-readable translation via the value attribute.
The value attribute is mandatory on <data>.
Never use <data> for dates or times; always use <time datetime="..."> for temporal content.
<data> is a semantic element; data-* are custom dataset attributes on any element.
<data> pairs seamlessly with Schema.org Microdata for search engine product indexing.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Which of the following elements MUST be used when marking up an ISBN book number for machine readability?

Topic: HTML Fundamentals

? Question 2 / 3

What is the fundamental difference between `<data value="42">` and `<div data-id="42">`?

Topic: HTML Fundamentals

? Question 3 / 3

Which of the following violates the WHATWG HTML specification?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

WHATWG HTML Living Standard Specification

Element Comparison: <data> vs. <time> vs. data-*

The Critical Rule: When to Use <time> vs. <data>

Microdata & Schema.org Integration

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Library Book Catalog Refactoring

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which of the following elements MUST be used when marking up an ISBN book number for machine readability?

What is the fundamental difference between <data value="42"> and <div data-id="42">?

Which of the following violates the WHATWG HTML specification?

Element Comparison: `<data>` vs. `<time>` vs. `data-*`

The Critical Rule: When to Use `<time>` vs. `<data>`

What is the fundamental difference between `<data value="42">` and `<div data-id="42">`?