datetime

Provide machine-readable date and time values on time, del, and ins elements. Uses ISO 8601 format while the element's text content remains human-friendly.

Overview

The datetime attribute provides a machine-readable date or time value while the element's text content displays a human-friendly version. Search engines, feed readers, and assistive technologies use the attribute value; users see the text.

Applies to:

<time> — the primary use; marks up dates, times, and durations
<del> — records when a deletion was made
<ins> — records when an insertion was made

Values

The datetime attribute accepts ISO 8601 formatted strings.

Format	Example	Meaning
Date	`2024-01-15`	January 15, 2024
Date + time	`2024-01-15T09:30:00`	Local time
Date + time + UTC	`2024-01-15T09:30:00Z`	UTC time
Date + time + offset	`2024-01-15T09:30:00-05:00`	With timezone offset
Time only	`14:30`	2:30 PM
Year + month	`2024-01`	January 2024
Year + week	`2024-W03`	Third week of 2024
Duration	`PT2H30M`	2 hours 30 minutes
Duration (days)	`P3DT4H`	3 days 4 hours

Dates and Times

The most common use is pairing a machine-readable timestamp with human-friendly text on the <time> element.

<p>Published on <time datetime="2024-01-15">January 15, 2024</time>.</p>  <p>Event starts at <time datetime="2024-06-20T19:00:00-05:00">7 PM Central</time>.</p>  <p>Last updated <time datetime="2024-03-10T14:30:00Z">March 10, 2024 at 2:30 PM UTC</time>.</p>  <p>Doors open at <time datetime="18:30">6:30 PM</time>.</p>

If the <time> element's text content is already a valid ISO 8601 string, the datetime attribute is optional. But in practice, human-friendly text almost never matches the machine format, so the attribute is nearly always needed.

Durations

Durations use the ISO 8601 duration format starting with P (period). Time components are preceded by T.

<p>Runtime: <time datetime="PT2H30M">2 hours, 30 minutes</time>.</p>  <p>Shipping takes <time datetime="P3D">3 business days</time>.</p>  <p>Contract length: <time datetime="P1Y6M">18 months</time>.</p>

Edit Timestamps

On <del> and <ins> elements, the datetime attribute records when the edit was made. This is useful for document revision history and change tracking.

<p>Price: <del datetime="2024-11-01T09:00:00Z">$49.99</del> <ins datetime="2024-11-01T09:00:00Z">$39.99</ins></p>  <del datetime="2024-08-15"> <p>This section has been removed as of August 15, 2024.</p> </del> <ins datetime="2024-08-15"> <p>Replacement content added on the same date.</p> </ins>

Article Dates

Use <time> with datetime for publication and modification dates. Search engines use this to determine content freshness.

<article> <h2>New Feature Announcement</h2> <p> <time datetime="2024-09-22T10:00:00Z">September 22, 2024</time> by Jane Smith </p> <p>We are excited to announce the launch of our new dashboard.</p> <footer> <p>Last updated: <time datetime="2024-10-05T16:45:00Z">October 5, 2024</time></p> </footer> </article>

Accessibility

Screen readers typically read the visible text content, not the datetime attribute value. Ensure the human-readable text is clear and unambiguous.
Avoid displaying only relative times ("3 hours ago") without also providing the absolute time, either as visible text or via datetime.
The datetime attribute gives assistive technologies access to the precise timestamp when needed.

Limitations

Browsers do not render the datetime value visually. It is purely semantic.
There is no built-in tooltip or formatting of the datetime value. If you want to show a formatted date on hover, you need JavaScript or a title attribute.
Invalid datetime values are silently ignored — the browser will not warn you about malformed ISO strings.
The <time> element is the only one where datetime conveys semantic meaning to search engines. On <del>/<ins> it is primarily for tooling and documentation.