<time>
The <time> HTML element represents a time, such as a calendar date, clock time, or duration. It may include the datetime attribute to translate dates into machine-readable format.
Overview
The <time> HTML element represents a time, such as a calendar date, clock time, or duration. It may include the datetime attribute to translate dates into machine-readable format.
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 time, such as a calendar date, clock time, or duration. It may include the datetime attribute to translate dates into machine-readable format.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.
Related links
Powered by web-features