This reference is built into PageRIJ — a live HTML, CSS & SVG authoring and learning environment.

HTML <time> element

The <time> element represents a date, a time, a time span, or a related time value. Its special strength is that it can show friendly human wording while also giving the browser, scripts, search engines, or other tools a precise machine-readable value.

For example, a page may show the words next Friday, 9 o'clock, June 2026, or three hours. Those phrases are easy for people to read, but they are not always easy for software to process. The datetime attribute supplies the exact value behind the visible wording.

The visible text goes between the opening and closing tags. The machine-readable value goes in the datetime attribute. For example, <time datetime="2026-06-23">23 June 2026</time> pairs a readable date with its machine-readable form. Relative wording such as today or next Friday needs to stay consistent with the date as the page ages.

The <time> element is especially useful for publication dates, event dates, appointments, timetables, deadlines, durations, logs, and historical references. It gives the text a small but important layer of semantic precision.

If datetime is omitted, the element must have no child elements and its text must itself be a valid machine-readable time value, such as 2026-06-23 or 09:00. Natural wording such as next Friday therefore needs a datetime attribute.

This element does not, by itself, format dates, convert time zones, or update clocks. It marks the meaning of the text. Styling and dynamic behaviour still belong to CSS and JavaScript.

Common formats include 2026-06-23 for a date, 2026-06 for a month, and 09:00 for a time without a time-zone offset. A value such as 2026-06-23T09:00+02:00 supplies a date and time with a UTC offset; Z denotes UTC. A duration such as PT3H means three hours. An offset records the offset for that value, not a named time zone or its daylight-saving rules.

Attributes: datetime, GLOBALS.

Typical layout:
<p>Published on
  <time datetime="2026-06-23">23 June 2026</time>.
</p>
<p>Meeting:
  <time datetime="2026-06-23T09:00+02:00">23 June 2026 at 9 a.m. (UTC+02:00)</time>.
</p>
<p>Duration: <time datetime="PT3H">three hours</time>.</p>
Visual representation:

Published on .

Meeting: .

Duration: .