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.
<!-- Date only --><p>Published on <time datetime="2024-01-15">January 15, 2024</time>.</p> <!-- Date and time with timezone --><p>Event starts at <time datetime="2024-06-20T19:00:00-05:00">7 PM Central</time>.</p> <!-- UTC timestamp --><p>Last updated <time datetime="2024-03-10T14:30:00Z">March 10, 2024 at 2:30 PM UTC</time>.</p> <!-- Time only --><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.
<!-- Duration: 2 hours 30 minutes --><p>Runtime: <time datetime="PT2H30M">2 hours, 30 minutes</time>.</p> <!-- Duration: 3 days --><p>Shipping takes <time datetime="P3D">3 business days</time>.</p> <!-- Duration: 1 year 6 months --><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.
<!-- When a deletion was made --><p>Price: <del datetime="2024-11-01T09:00:00Z">$49.99</del><ins datetime="2024-11-01T09:00:00Z">$39.99</ins></p> <!-- Edit log with human-readable context --><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
datetimeattribute 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
datetimeattribute gives assistive technologies access to the precise timestamp when needed.
Limitations
- Browsers do not render the
datetimevalue visually. It is purely semantic. - There is no built-in tooltip or formatting of the
datetimevalue. If you want to show a formatted date on hover, you need JavaScript or a title attribute. - Invalid
datetimevalues are silently ignored — the browser will not warn you about malformed ISO strings. - The
<time>element is the only one wheredatetimeconveys semantic meaning to search engines. On<del>/<ins>it is primarily for tooling and documentation.
See Also
<time>— the time elementciteattribute — source URL for blockquotes, del, and insdata-format-date— VB attribute for formatting dates