Tutorial
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.