It’s Time for an HTML5 Time Tag

One of the additions to HTML in HTML5 was the <time> tag and its datetime attribute. This tag allows you to represent a machine-readable date and/or time on your web pages.

Because you can simply place dates and times on a page, you might wonder why you would ever want to use a time tag. The simple answer is that while you can display dates and times on your page in a variety of ways, there are times when you might want the browser to clearly understand what the date and/or time is. By using the datetime attribute of the <time> tag, you can make sure that it is clear that a date and/or a time are being represented. More importantly, using scripting or other coding, you can access this machine-readable format and use it to do calculations and more.

The <time> tag and its datetime attribute are supported by all the major browsers including Google Chrome 6.0+, Internet Explorer/Edge 9.0+, Safari 5.0+ Firefox 4.0+, and Opera 11.1+.

A Simple Example of the Time Tag

The <time> tag can be used without the datetime attribute to indicate a simple date and or time. The following are a couple of such simple <time> tag examples:

<p>The year of his birth was <time>1994</time>.</p>
<p>The appointment is at <time>10:00</time> on Monday. </P>

It is better, however, to include the datetime attribute. This will clarify the specific date and/or time while giving you flexibility to display the information in a friendlier manner. When you include the datetime attribute, then the text you include between the opening and closing time tags can be in whatever format you like. As examples:

<p>Our party is going to be <time datetime="2018-08-11 17:00">the eleventh of August at 5:00pm</time></p>

<p>The appointment is <time datetime="2018-06-11">Monday</time>.</p>

<p>In the news <time datetime=2018-08-01>yesterday</time>, President Trump Tweeted...</p>

The Syntax of the Datetime Attribute

To illustrate dates and/or time, the datetime attribute should follow a specific syntax format. If you just want a date, then you can use the standard format of “yyyy-mm-dd” where yyyy is the four-digit year, mm is the two-digit month, and dd is the two-digit day within the month:

<time datetime="2018-08-23">August 23, 2018</time>
<time datetime="2018-08">August 23</time>
<time datetime="2018"> 2018</time>

If you want to specify a date and time, the you would use the format of “yyyy-mm-ddThh:mm:ss” where T is either the letter ‘T’ or a space followed by hh for the hour, mm for minutes, and ss for second:

<time datetime="2018-08-23 11:00:00">August 23, 2018 at 11 am</time>
<time datetime="2018-08-23T11:00">August 23, 2018 at 11 am</time>
<time datetime="T10:30">10:30am</time>
<time datetime="17:00">5:00 pm</time>

Note that the first two examples above are both for August 23rd at 11 a.m. You can use either the ‘T’ or a space to separate the date from the time. Additionally, you can leave off the seconds in the second example since they are zeros. You could have also left off the minutes, which are also zeros, but that isn’t as clear!

Of course, websites are often seen across various time zones and geographic locations. As such, it is wise to include a time zone indicator with your datetime attribute. This can be done by either presenting the datetime as Zulu or Greenwich Mean Time or by including a time zone offset. This is done by either adding a Z to the end of the time in the datetime attribute to indicate Zulu time, or by adding the time zone offset directly after. The following are the same examples as above, but done with Pacific time (-08:00) indicated:

<time datetime="T10:30-08:00">10:30am</time>
<time datetime="17:00-08:00">5:00 pm</time>

Doing Weeks Instead of Dates

In addition to doing specific dates as shown previously, you can also indicate the week within a year. For example, the following indicates the twenty-sixth week of the year:

<p><time datetime="2018-W26">Roughly mid-year</time>

In Conclusion

The time tag with the datetime attribute were an addition to HTML5 that allows you to be very clear on a date and time in your markup while allowing you more flexibility in the text displayed to users. This will make it easier for browsers, scripts, and other procedures to be able to understand and use the information on your page in more meaningful ways. This article covered displaying dates and times, in a future article another aspect of the time tag will be covered, which is the ability to indicate duration of time.