HTML - tags - time tag

revision: January 28, 2025

Content

"time" tag : defines a specific time

The <time> tag defines a specific time (or datetime). The "datetime" attribute of this element is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.

The <time> element isn't particularly useful until paired with a "datetime" attribute. Once a "datetime" attribute has been associated with the <time> element, the browser knows a lot more about the time described in the time element and can use that information when interacting with other applications — such as when importing information from an HTML email or webpage into a calendar application.

Attributes: the <time> element includes the global attributes. The tag also supports the following additional attribute:

datetime ; value: datetime; represent a machine-readable format of the <time> element.

This attribute indicates the time and/or date of the element and must be in one of the vaild datetime formats:

a valid year string (2011),
a valid month string (2011-11),
a valid date string (2011-11-18),
a valid yearless date string (11-18),
a valid week string (2011-W47),
a valid time string (14:54, 14:54:39, 14:54:39.929),
a valid local date and time string (2011-11-18T14:54:39.929, 2011-11-18 14:54:39.929),
a valid global date and time string (2011-11-18T14:54:39.929Z, 2011-11-18T14:54:39.929-0400, 2011-11-18T14:54:39.929-04:00, 2011-11-18 14:54:39.929Z, 2011-11-18 14:54:39.929-0400, 2011-11-18 14:54:39.929-04:00),
a valid duration string (PT4H18M3S).

Syntax

<time datetime=" " > . . . . </time>

some examples

code:
              <p>Open from 10:00 to 21:00 every weekday.</p>
              <p>I have a date on Valentine's day.</p>
          

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

code:
              <p>Our shop opens at <time>09:00</time>.</p>
              <p>We should plan to go to the movie on <time datetime="2021-01-13">
              this Saturday</time>.</p>
              <p>I give surprise on <time datetime="2021-02-14T20:00">Valentine's 
              day</time>.</p>