<time>
The <time> HTML element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
It may represent one of the following:
A time on a 24-hour clock.
A precise date in the Gregorian calendar (with optional time and timezone information).
A valid time duration.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 62 | 14 | 22 | 7 | 62 | 4 | |
| HTML attribute | ||||||
datetime | 62 | 14 | 22 | 7 | 62 | 4 |
| DOM API | ||||||
| The HTMLTimeElement interface provides special properties (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating time elements. | 62 | 14 | 22 | 10 | 62 | 10 |
| The dateTime property of the HTMLTimeElement interface is a string that reflects the datetime HTML attribute, containing a machine-readable form of the element's date and time value. | 62 | 14 | 22 | 10 | 62 | 10 |
Syntax
<p>Posted on: <time datetime="2024-03-15">March 15, 2024</time></p>
<p>Event Start: <time datetime="2024-03-15T14:00">2:00 PM</time></p>
<p>Duration: <time datetime="PT2H30M">2 hours 30 minutes</time></p>Live demo
datetime. Display
Time element in between for. datetimenotation and mechanismallowread datetime.
relative datetimerepresentationation
Time element in "3before""2 timebetweenbefore"equal. relativerepresentationationation to also datetime attach.
Use cases
-
Using <time>
The <time> HTML element represents a specific period in time.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.