Time Element and Datetime Attribute with “Z”

In the Standardize Times with the HTML5 Datetime Attribute lesson in the Applied Accessibility section, the example shows values that look like this: 2016-08-15T08:12Z. The “Z” stands for Universal Time Coordinated (UTC).

The time element wraps around text within the writing on a page that refers to a date. The time element doesn’t change the appearance of the page, but it gives information to machines that are analyzing that date data in some way. For example, if you were making a webpage that advertised an event, and the text on the page said, “Come to The Cool Pub this Thanksgiving for a free pint of Pilgrim Pilsner”, you could wrap “Thanksgiving” in a time tag with a datetime element of “2019-11-28”.

If you wanted to add a time, you could do this:

Come to the Cool Pub this Thanksgiving at 8 PM for a free pint of Pilgrim Pilnser.

code snippet showing


In the freeCodeCamp example, they put a “Z” after the time in the code. The “Z” means the background time is in UTC. Universal Time Coordinate used to be called Greenwich Mean Time, so you will sometimes see it called GMT. If this standard time zone specification (Z) is used, then if you code “20:00Z” it doesn’t mean 8 PM in your time zone (unless you live along the Prime Meridian). It means 8 PM universal standard time. In my time zone, for example, this would actually be 11 AM (PST). If you decide to use the Z, make sure that you are converting the time in your code into UTC.

For example, if I wanted to use the Z in my behind-the-scenes code, I would do this:

code snippet showing a time element with datetime attribue with time set to 04:00Z

because 04:00z, or 4 AM UTC, means 8 PM PST.

Leave a Reply

Your email address will not be published. Required fields are marked *