HTML - <time> tag

HTML <time> tag is used to define a specific date and time. It displays time in the 24-hour clock or a precise date in a Gregorian calendar in HTML. It may contain the "datetime" attribute, which converts dates into machine-readable format, allowing to enhance search engine results or customized functionality such as reminders.

This tag has an optional attribute "datetime" that is used to express the date/time in a machine-readable form of the <time> tag.

Syntax

<time>.....</time>

Attribute

HTML time tag supports Global and Event attributes of HTML. A specific attribtes is accepted as well which is listed below.

Attribute	Value	Description
datetime	datetime	Hold a machine readable dattime format for the time element.

Examples of HTML time Tag

Bellow examples will illustarte the usage of time tag, where, when and how to use time tag to render the time in your context.

Creating a time element

Creating a time element using the HTML <time> tag. In the following example, we are creating an HTML document and demonstrating the working of <time> tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML time tag</title>
   <style>
      time {
         font-weight: bold;
      }
   </style>
</head>
<body>
   <h2>Example of time Tag</h2>
   <p>
      The tutorialspoint is celebrating their 10 <sup>th</sup> anniversary
      on <time datetime="2023-06-12">Jun 12</time> 
      in Hyderabad's office. </p>
   <p>
      The concert will start at <time datetime="20:00">20:00</time> and 
      you'll be able to enjoy the band for at least <time datetime="PT2H30M">2h 30m</time>.
   </p>
</body>
</html>

Using datetime attribute with <time> tag

We can mention a machin readable datetime on the time element using the HTML datatime attribute.

<!DOCTYPE html>
<html>
<head>
   <title>HTML time tag</title>
   <style>
      time {
         font-weight: bold;
      }
   </style>
</head>
<body>
   <p>
      We open our shop at <time>09:00</time> am. 
   </p>
   <p>
      The business meeting is scheduled on 
      <time datetime="2023-06-16">this friday</time>.
      </p>
   <p>
      The 10 <sup>th</sup> anniversary of tutorialspoint
      scheduled at <time datetime="2023-06-12 T0 02:00-06:00">2pm last Monday </time>.
      </p>
</body>
</html>

Supported Browsers

Tag
time	Yes 62.0	Yes 18.0	Yes 22.0	Yes 7.0	Yes 49.0

html_tags_reference.htm