Table of Contents

URL: https://www.progressiverobot.com/how-to-use-the-time-element-in-html5/

Introduction

The <time> element is new to HTML5. It makes it easier to markup time information. Let's examine some scenarios and use <time> in practice.

Prerequisites

time illustration for: Prerequisites

Using the Time Element in HTML5

<time> allows you to markup date and/or time information in a format that's easy to understand for both humans and machines. For example, if you want to markup time that's already in a machine-readable format, you use <time> like this:

				
					
&lt;p&gt;

  Meet me at &lt;time&gt;11:59&lt;/time&gt; at the dock.

&lt;/p&gt;

Or, if the date/time information is not machine-readable, you'd mark it up like this with the datetime attribute:

				
					
&lt;p&gt;

  Last updated

  &lt;time datetime="2015-11-03"&gt;

    November 3rd 2015

  &lt;/time&gt;.

&lt;/p&gt;

The value for the datetime attribute takes one of the following formats:

  • date: YYYY-MM-DD
  • datetime (with time zone): YYYY-MM-DDThh:mm:ss.Z (e.g.: 2016-06-30T03:37:56-0800)
  • datetime-local (no time zone): YYYY-MM-DDThh:mm:ss
  • time: hh:mm:ss
  • month: YYYY-MM

This is how you can use the new <time> element.

Conclusion

<time> is an important new element in HTML5.

For a more comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.