Publishing Machine-Readable Dates and Durations with the HTML time Element

Websites display dates in countless formats: "yesterday", "2 hours ago", "04/05/2021", or "Nov 8th". While humans parse these variations with context, web scrapers, search engine crawlers, and assistive technologies need standardized machine-readable timestamps to understand temporal relationships.

The HTML <time> element pairs human-friendly visual text with standardized ISO 8601 machine-readable strings via the datetime attribute.

Example #

<p>
  Published on
  <time datetime="2021-11-08T09:30:00Z">8 Nov 2021</time>
</p>

<p>
  Reading time:
  <time datetime="PT4M">4 minutes</time>
</p>

Implementation #

The datetime attribute supports dates, timestamps with UTC offsets, and standard ISO 8601 duration formats (PT for time intervals):

<!-- Specific date with timezone -->
<time datetime="2021-11-08">November 8, 2021</time>

<!-- Duration: 2 hours and 30 minutes -->
<time datetime="PT2H30M">2.5 hours</time>

Main Point: The <time> element with ISO 8601 datetime bridges human readability and machine parsing for publication dates, event calendars, and durations.

Credits #

Photo by Aaron Burden on Unsplash

← Home