HTML - HTML <time> and <data> Elements for Machine-Readable Information

The HTML <time> and <data> elements are semantic HTML elements used to provide information in a way that is meaningful to both humans and machines. They allow developers to display readable content while also associating that content with a standardized machine-readable value.

These elements are particularly useful when creating websites that contain dates, times, prices, product information, measurements, identifiers, or other structured content. Unlike generic elements such as <span>, they communicate the purpose of the information to browsers, search engines, accessibility tools, and other software.

1. The `<time>` Element

The <time> element represents a specific period in time or a date and time.

It can contain ordinary human-readable text while its datetime attribute provides a machine-readable representation.

Basic syntax

<time datetime="2026-09-08">September 8, 2026</time>

A visitor sees:

September 8, 2026

However, software can read the datetime attribute and understand that the value represents the date 2026-09-08.

This separation between presentation and machine-readable data is one of the main advantages of the <time> element.

2. Why Use `<time>` Instead of `<span>`?

A developer could write:

<span>September 8, 2026</span>

This displays the date correctly, but the browser does not know that the text represents a date.

With <time>:

<time datetime="2026-09-08">September 8, 2026</time>

the HTML explicitly communicates that the content represents a date.

This makes the markup more meaningful and machine-readable.

The <time> element is therefore an example of semantic HTML.

3. The `datetime` Attribute

The datetime attribute contains the machine-readable value associated with the content.

For example:

<p>
    The event will be held on
    <time datetime="2026-10-15">October 15, 2026</time>.
</p>

The visible content is:

October 15, 2026

The machine-readable value is:

2026-10-15

The value of datetime should follow an appropriate date or time format rather than an arbitrary string.

4. Representing a Date

A date can be represented using the year, month, and day format:

<time datetime="2026-09-08">September 8, 2026</time>

The general structure is:

YYYY-MM-DD

For example:

<time datetime="2027-01-26">January 26, 2027</time>

This represents January 26, 2027.

5. Representing a Time

The <time> element can also represent a specific time.

<time datetime="14:30">2:30 PM</time>

Here:

2:30 PM is intended for human readers.
14:30 provides the machine-readable time.

A time can also include seconds:

<time datetime="14:30:45">2:30:45 PM</time>

6. Representing Date and Time Together

A date and time can be combined.

<time datetime="2026-09-08T14:30">September 8, 2026 at 2:30 PM</time>

The T separates the date from the time.

The machine-readable value is:

2026-09-08T14:30

This format is useful for events, appointments, meetings, schedules, and publication information.

7. Representing Time Zones

A time can also include a time-zone offset.

For example:

<time datetime="2026-09-08T14:30+05:30">
    September 8, 2026 at 2:30 PM IST
</time>

The +05:30 indicates the offset from UTC.

This can be useful when an event is associated with a particular time zone.

8. Representing Durations

The <time> element can also represent a duration.

For example:

<time datetime="PT2H">2 hours</time>

The value PT2H represents a duration of two hours.

Another example:

<time datetime="PT45M">45 minutes</time>

Here, PT45M represents a duration of 45 minutes.

Durations are particularly useful for information such as:

<p>
    Course duration:
    <time datetime="P30D">30 days</time>
</p>

9. Using `<time>` for Publication Dates

The <time> element is commonly useful for articles and blog posts.

<article>
    <h2>Introduction to HTML</h2>

    <p>
        Published on
        <time datetime="2026-09-08">September 8, 2026</time>
    </p>

    <p>
        HTML provides semantic elements that help describe the meaning
        of information on a webpage.
    </p>
</article>

The reader sees a normal publication date, while software can identify the exact date.

10. Using `<time>` for Events

Event websites are another common use case.

<h2>Web Development Workshop</h2>

<p>
    Date:
    <time datetime="2026-10-20">October 20, 2026</time>
</p>

<p>
    Starting time:
    <time datetime="10:00">10:00 AM</time>
</p>

This gives the information semantic meaning without requiring JavaScript.

11. The `<data>` Element

The <data> element is used to associate human-readable content with a machine-readable value.

Its basic syntax is:

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

For example:

<data value="12345">Product A</data>

A visitor sees:

Product A

The value attribute contains:

The value might represent a product identifier or another machine-readable identifier.

12. Difference Between `<data>` and `<time>`

Although the two elements are related, they have different purposes.

<time> is specifically designed for dates, times, and durations.

<data> is intended for other types of information that have a machine-readable value.

For example:

<time datetime="2026-09-08">September 8, 2026</time>

is appropriate for a date.

But:

<data value="SKU-4587">Blue Cotton Shirt</data>

is appropriate for a product identifier.

13. Using `<data>` for Product Information

Consider an online store displaying products.

<ul>
    <li>
        <data value="P1001">Laptop</data>
    </li>

    <li>
        <data value="P1002">Wireless Keyboard</data>
    </li>

    <li>
        <data value="P1003">Computer Mouse</data>
    </li>
</ul>

The visitor sees the product names, while the HTML associates each product with an identifier.

This can be useful when the visible name and internal identifier are different.

14. Using `<data>` for Product Codes

For example:

<p>
    Product:
    <data value="SKU-7845">Premium Coffee Beans</data>
</p>

The visible information is:

Premium Coffee Beans

The machine-readable value is:

SKU-7845

The <data> element makes this relationship explicit in the markup.

15. Using `<data>` for Numeric Values

The element can also be used with numeric values.

<p>
    Number of participants:
    <data value="250">250 participants</data>
</p>

The displayed text can be formatted for people while the value attribute provides the associated machine-readable value.

However, <data> should not automatically be used for every number on a page. It is most useful when the visible content has a corresponding machine-readable value that software may need to interpret.

16. `<data>` for Identifiers

Identifiers are another useful application.

<p>
    Employee:
    <data value="EMP-1024">Rahul</data>
</p>

The user sees:

Rahul

The machine-readable identifier is:

EMP-1024

This is useful when displaying names alongside internal codes, product IDs, catalog numbers, or similar identifiers.

17. `<time>` and `<data>` in a Real-World Example

Consider an event page:

<article>
    <h1>Web Development Conference</h1>

    <p>
        Event ID:
        <data value="EVENT-2026-001">Web Development Conference</data>
    </p>

    <p>
        Date:
        <time datetime="2026-11-15">November 15, 2026</time>
    </p>

    <p>
        Starting time:
        <time datetime="09:30">9:30 AM</time>
    </p>

    <p>
        Duration:
        <time datetime="PT6H">6 hours</time>
    </p>
</article>

Here, each element has a specific semantic purpose.

The <data> element identifies the event with a machine-readable value.

The first <time> element represents the event date.

The second <time> element represents the starting time.

The third <time> element represents the duration.

18. Difference Between `<time>` and `<data>` and `<span>`

These elements may appear similar visually, but they communicate different meanings.

`<span>`

<span>September 8, 2026</span>

A generic inline container with no special semantic meaning.

`<time>`

<time datetime="2026-09-08">September 8, 2026</time>

Specifically represents a date, time, or duration.

`<data>`

<data value="P1001">Product A</data>

Associates human-readable content with a machine-readable value.

Choosing the appropriate element makes the HTML more meaningful and easier for software to interpret.

19. Using `<time>` Without `datetime`

The <time> element can sometimes contain a valid date or time directly in its text.

For example:

<time>2026-09-08</time>

However, using the datetime attribute is generally preferable when the visible text uses a human-friendly format.

For example:

<time datetime="2026-09-08">
    September 8, 2026
</time>

This clearly separates the human-readable representation from the machine-readable representation.

20. Accessibility Considerations

Semantic HTML can help assistive technologies and other software understand the structure and meaning of a webpage.

For example:

<p>
    The meeting is scheduled for
    <time datetime="2026-09-20T10:00">
        September 20, 2026 at 10:00 AM
    </time>.
</p>

The content is naturally understandable to users, while the semantic element provides additional structural meaning.

However, developers should not assume that every browser or assistive technology will automatically provide a special visual or spoken presentation for these elements. The main benefit is meaningful, standards-based markup.

21. Search Engines and Machine Readability

Semantic elements can make information easier for software to interpret.

For example:

<time datetime="2026-09-08">September 8, 2026</time>

provides an explicit representation of the date.

However, developers should not assume that simply using <time> or <data> guarantees a particular search-engine ranking or rich result. Search engines use many signals when interpreting webpages.

The primary purpose of these elements is to provide accurate semantic information in the HTML.

22. Common Mistakes

Mistake 1: Using `<data>` for dates

Avoid:

<data value="2026-09-08">September 8, 2026</data>

when the information is specifically a date.

Prefer:

<time datetime="2026-09-08">September 8, 2026</time>

Mistake 2: Using `<time>` for arbitrary identifiers

Avoid:

<time datetime="PROD-1001">Laptop</time>

A product identifier is not a date or time.

Use:

<data value="PROD-1001">Laptop</data>

Mistake 3: Putting an invalid value in `datetime`

Avoid treating datetime as a place for arbitrary text:

<time datetime="Next Monday">Next Monday</time>

Instead, provide an appropriate machine-readable date:

<time datetime="2026-09-14">Next Monday</time>

assuming that is the intended date.

23. Practical Example: Blog Website

A blog can combine both elements effectively:

<article>
    <h1>Learning Semantic HTML</h1>

    <p>
        Published:
        <time datetime="2026-09-08">September 8, 2026</time>
    </p>

    <p>
        Article ID:
        <data value="HTML-ART-105">HTML-ART-105</data>
    </p>

    <p>
        Reading time:
        <time datetime="PT8M">8 minutes</time>
    </p>
</article>

This example contains three different types of information:

Publication date
Article identifier
Estimated reading duration

The HTML communicates the meaning of each piece of information instead of treating everything as generic text.

24. Practical Example: E-Commerce Website

An online store could use these elements as follows:

<article>
    <h2>Premium Coffee Beans</h2>

    <p>
        Product code:
        <data value="COFFEE-1001">COFFEE-1001</data>
    </p>

    <p>
        Available since:
        <time datetime="2026-08-01">August 1, 2026</time>
    </p>

    <p>
        Offer ends:
        <time datetime="2026-09-30">September 30, 2026</time>
    </p>
</article>

The product code is represented using <data>, while the dates are represented using <time>.

25. Advantages of `<time>` and `<data>`

Using these elements provides several advantages:

Improved semantic meaning
The HTML clearly communicates what the content represents.
Better machine readability
Software can distinguish dates, times, durations, and associated values.
Cleaner HTML structure
Developers do not need to rely entirely on generic containers.
Better maintainability
Other developers can understand the purpose of the content more easily.
Useful for structured content
They are particularly valuable for articles, events, products, schedules, and catalogs.
Separation of human and machine representations
Users can see natural language while software receives a standardized value.

26. Key Differences

Element	Primary Purpose	Important Attribute	Example
`<time>`	Dates, times, durations	`datetime`	`<time datetime="2026-09-08">September 8</time>`
`<data>`	Human-readable content with a machine-readable value	`value`	`<data value="P1001">Laptop</data>`
`<span>`	Generic inline content	None required	`<span>September 8</span>`

The most important distinction is simple:

Use <time> when the information represents a date, time, or duration. Use <data> when ordinary content needs to be associated with a machine-readable value.

27. Complete Example

Here is a complete webpage demonstrating both elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Time and Data Elements</title>
</head>
<body>

    <article>
        <h1>Web Development Workshop</h1>

        <p>
            Event ID:
            <data value="WD-2026-100">WD-2026-100</data>
        </p>

        <p>
            Date:
            <time datetime="2026-10-15">October 15, 2026</time>
        </p>

        <p>
            Starting time:
            <time datetime="10:00">10:00 AM</time>
        </p>

        <p>
            Duration:
            <time datetime="PT4H">4 hours</time>
        </p>

        <p>
            Registration closes on
            <time datetime="2026-10-10">October 10, 2026</time>.
        </p>
    </article>

</body>
</html>

This example demonstrates how semantic HTML can represent different types of information accurately without changing the visual appearance of the webpage.

Conclusion

The HTML <time> and <data> elements are useful semantic tools for representing information that has a clear machine-readable meaning. The <time> element should be used for dates, times, and durations, while <data> connects human-readable content with an associated machine-readable value.

Their main purpose is not to create a special visual appearance. Instead, they improve the meaning and structure of HTML. By using these elements appropriately, developers can create webpages whose content is easier for browsers, software, assistive technologies, and other systems to interpret.

For modern HTML development, understanding <time> and <data> is valuable because semantic markup goes beyond simply making content appear correctly on a screen. It also describes what that content actually means.

HTML - HTML <time> and <data> Elements for Machine-Readable Information

1. The <time> Element

Basic syntax

2. Why Use <time> Instead of <span>?

3. The datetime Attribute

4. Representing a Date

5. Representing a Time

6. Representing Date and Time Together

7. Representing Time Zones

8. Representing Durations

9. Using <time> for Publication Dates

10. Using <time> for Events

11. The <data> Element

12. Difference Between <data> and <time>

13. Using <data> for Product Information

14. Using <data> for Product Codes

15. Using <data> for Numeric Values

16. <data> for Identifiers

17. <time> and <data> in a Real-World Example

18. Difference Between <time> and <data> and <span>

<span>

<time>

<data>

19. Using <time> Without datetime

20. Accessibility Considerations

21. Search Engines and Machine Readability

22. Common Mistakes

Mistake 1: Using <data> for dates

Mistake 2: Using <time> for arbitrary identifiers

Mistake 3: Putting an invalid value in datetime

23. Practical Example: Blog Website

24. Practical Example: E-Commerce Website

25. Advantages of <time> and <data>

26. Key Differences

27. Complete Example

Conclusion

1. The `<time>` Element

2. Why Use `<time>` Instead of `<span>`?

3. The `datetime` Attribute

9. Using `<time>` for Publication Dates

10. Using `<time>` for Events

11. The `<data>` Element

12. Difference Between `<data>` and `<time>`

13. Using `<data>` for Product Information

14. Using `<data>` for Product Codes

15. Using `<data>` for Numeric Values

16. `<data>` for Identifiers

17. `<time>` and `<data>` in a Real-World Example

18. Difference Between `<time>` and `<data>` and `<span>`

`<span>`

`<time>`

`<data>`

19. Using `<time>` Without `datetime`

Mistake 1: Using `<data>` for dates

Mistake 2: Using `<time>` for arbitrary identifiers

Mistake 3: Putting an invalid value in `datetime`

25. Advantages of `<time>` and `<data>`