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

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

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:

<p>
  Meet me at <time>11:59</time> at the dock.
</p>

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

<p>
  Last updated
  <time datetime="2015-11-03">
    November 3rd 2015
  </time>.
</p>

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.