time

The HTML <time> element gives a date, time, or duration semantic meaning. Its visible text can be friendly to people while datetime provides a machine-readable value.

What you will learn

What dates, times, and durations time can represent
How visible text and datetime work together
How to write machine-readable ISO 8601 values

Basic date example

<time datetime="2026-09-05">September 5, 2026</time>

The user-facing text can follow the page’s language and style. The datetime value should use a standard format that software can parse consistently.

Times and date-times

<time datetime="14:30">2:30 PM</time>
<time datetime="2026-09-05T14:30+09:00">September 5 at 2:30 PM</time>

Include a time-zone offset when the moment needs to be understood across regions. Do not imply a time zone you do not know.

Durations

<time datetime="PT45M">45 minutes</time>
<time datetime="P2D">2 days</time>

Durations use an ISO 8601 duration such as PT45M for 45 minutes. A duration is different from a point on the calendar.

time is not just a styling hook

Use time when the content has date, time, or duration meaning. CSS can style it, but styling alone does not give software the semantics or a reliable value.

Common mistakes

Putting a localized date in datetime instead of a machine-readable value.
Leaving the time zone ambiguous when the event crosses regions.
Using time for an ordinary number or a period that has no temporal meaning.
Assuming browsers will automatically convert every visible date into a local format.