W3docs
en
Log in

HTML <time> Tag

The <time> tag, a new element in HTML 5, is used to define a human-readable time on a 24-hour clock or a precise date in the Gregorian calendar.

The <time> tag is one of the HTML5 elements. It is used to define one of the following:

  • a human-readable time on a 24-hour clock,
  • a precise date in the Gregorian calendar (with optional timezone and time information).

The <time> tag should not be used for dates that are prior to the introduction of the Gregorian calendar.

The datetime attribute is used to define a machine-readable format, which allows search engines to produce smarter results and user agents to add reminders to the user’s calendar. When the datetime attribute is missing, the <time> element should not have any element descendants. In this case, the datetime value will be the child text content of the element.

Syntax

The <time> element requires both opening and closing tags. The content is written between the opening <time> and closing </time> tags.

Example of the HTML <time> tag:

HTML <time> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>The game will be held on <time datetime="2018-09-28T19:00">September 28</time>.</p>
    <p>It will start at <time>19:00</time></p>
  </body>
</html>
Try it Yourself »

Result

time example

Attributes

AttributeValueDescription
datetimeYYYY-MM-DD, YYYY-MM-DDThh:mm, hh:mm, etc.Specifies the time/date in a machine-readable format. The value must follow a valid date/time string format (e.g., ISO 8601). Timezone offsets like +02:00 or Z are also supported.

The <time> tag also supports the Global Attributes.

Note: The pubdate attribute was previously supported but was deprecated and removed in later HTML specifications.

How to style an HTML <time> tag

time {
  color: blue;
  font-weight: bold;
}

Practice

Practice

What is true about the HTML <time> tag?