HTML5 <time> Tag

The HTML <time> element is used to represent either a time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information).

The only content permitted inside this element is phrasing content. Both the starting and ending tags are mandatory for this element. The parent of the <time> tag can be any element that accepts phrasing content.

This element is intended to be used presenting dates and times in a machine readable format. This can be helpful for user agents to offer any event scheduling for user’s calendar.

This element is not appropriate for instances where a specific date cannot be calculated, nor should it be used for dates prior to the introduction to the Gregorian calendar (due to complications with calculating those dates).

Here are some examples of using this tag:

<!-- valid month string -->
<time>2011-11</time>

<-- valid date string -->
<time>2011-11-12</time>

<!-- valid time string -->
<time>14:54</time>
<time>14:54:39</time>
<time>14:54:39.92922</time>

<!-- valid local date and time string -->
<time>2011-11-12T14:54</time>
<time>2011-11-12T14:54:39</time>
<time>2011-11-12T14:54:39.92922</time>
<time>2011-11-12 14:54</time>
<time>2011-11-12 14:54:39</time>
<time>2011-11-12 14:54:39.92922</time>

<p>The concert starts at <time>20:00</time>.</p>

<p>The concert took place on <time datetime="2001-05-15T19:00">May 15</time>.</p>

Attributes

datetime

This attribute indicates the time and date of the element and must be a valid date with an optional time string. If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp.

Examples

See the Pen YZpOPy by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <time> element on MDN.
  2. You can also read the HTML <time> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top