The HTML 'time' Tag

Making Machine-Readable Dates and Times Available to Browsers

The HTML time tag is used to provide a machine-readable date and/or time for browsers and spiders.

When configured to do so, the browser can use the date and time information to interact with other applications — importing the date/time information into a calendar application, for example, or into reminder software. It also may allow better search results when searches require specific dates or times.

The time tag can have CSS styling like the span and other HTML tags can. The reason to use the time tag instead of the span tag is to provide machine-readable date and/or time for browsers and spiders.

Here is a template of how the time tag is coded:

<time datetime="[machine-readable]">[human-readable]</time>

Here is an example. The source code is further below, following a comment about the example.

Let's go trick or treating at 5:30!

In the above statement, "trick or treating at 5:30" is the human-readable part. The machine-readable part, in the time tag's datetime attribute, is 2024-10-31T17:30:00.000

Here is the source code for the above example:

Let's go <time datetime="2024-10-31T17:30:00.000" style="font-weight:bold;">trick or treating at 5:30</time>!

There are various ways to properly format the machine-readable value. The value may be a date only, a time only, and both date and time.

Date-only datetime Value Formats —

Valid date values are of these formats:

year
year-month
year-month-day
month-day

The year is always 4 digits (year 1 would be 0001). Month and day each are always 2 digits. Here are examples for each of the above formats.

datetime="2024"
datetime="2024-05"
datetime="2024-05-12"
datetime="05-12"

Time-only datetime Value Formats —

Valid time values are of these formats:

hour:minute
hour:minute:second
hour:minute:second.millisecond

The hour, minute, and second are always 2 digits. The millisecond is always 3 digits. Notice that the second/millisecond separator is a period character but hour/minute and minute/second separaters are a colon character. Here are examples.

datetime="15:02"
datetime="15:02:11"
datetime="15:02:11.347"

Date and Time datetime Value Formats —

There are two formats for date and time values:

year-month-day hour:minute:second.millisecond
year-month-dayThour:minute:second.millisecond

The difference between the two is that a space or a capital letter "T" may separate the date and time. Both versions are read the same way by browsers and spiders.

The year is 4 digits. The month, day, hour, minute, and second are 2 digits. The millisecond is 3 digits.

Here is an example of each.

datetime="2024-05-12 15:02:11.347"
datetime="2024-05-12T15:02:11.347"

The above is local time because no time zone is specified.

Specifying global time instead of local time:

To specify global time, a time zone offset is appended to the datetime value. There are five different ways the time zone offset can be specified.

year-month-day hour:minute:second.millisecondZ
year-month-day hour:minute:second.millisecond-hours:minutes
year-month-day hour:minute:second.millisecond-hoursminutes
year-month-day hour:minute:second.millisecond+hours:minutes
year-month-day hour:minute:second.millisecond+hoursminutes

The first format, with the letter "Z" appended specifies UTC (like GMT).

The second format specifies a minus offset of a certain number of hours and a certain number of minutes, with a colon character separating hours and minutes.

The third format is similar to the second format except there is no separating character for hours and minutes.

The fourth and fifth formats are similar to the second and third formats except a plus offset is specified instead of a minus offset.

The hours and minutes are both 2 digits.

As with the local time formats, the capital letter "T" may be used instead of a space to separate date and time.

Here is an example of each of the five formats with a space separating the date and time, then another five formats with the capital letter "T" instead of space for the date/time separation — 10 examples altogether.

datetime="2024-05-12 15:02:11.347Z"
datetime="2024-05-12 15:02:11.347-05:00"
datetime="2024-05-12 15:02:11.347-0500"
datetime="2024-05-12 15:02:11.347+02:00"
datetime="2024-05-12 15:02:11.347+0200"
datetime="2024-05-12T15:02:11.347Z"
datetime="2024-05-12T15:02:11.347-05:00"
datetime="2024-05-12T15:02:11.347-0500"
datetime="2024-05-12T15:02:11.347+02:00"
datetime="2024-05-12T15:02:11.347+0200"

With the datetime attribute and the time tag, you can give browsers and spiders an exact date or time or both in a format readable by them. Concurrently, you can also publish a time statement for humans to read.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager