<time>: The (Date) Time element
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
The<time>HTML element represents a specific period in time. It may include thedatetime 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 theGregorian calendar (with optional time and timezone information).
- A valid time duration.
Try it
<p> The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p><p> The concert starts 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>time { font-weight: bold;}Attributes
Like all other HTML elements, this element supports theglobal attributes.
datetimeThis attribute indicates the time and/or date of the element and must be in one of the formats described below.
Usage notes
This element is for presenting dates and times in a machine-readable format. For example, this can help a user agent offer to add an event to a user's calendar.
This element should not be used for dates prior to the introduction of the Gregorian calendar (due to complications in calculating those dates).
Thedatetime value (the machine-readable value of the datetime) is the value of the element'sdatetime attribute, which must be in the proper format (see below). If the element does not have adatetime attribute,it must not have any element descendants, and thedatetime value is the element's child text content.
Valid datetime values
| Description | Microsyntax | Examples |
|---|---|---|
| Valid month string | YYYY-MM | 2011-11,2013-05 |
| Valid date string | YYYY-MM-DD | 1887-12-01 |
| Valid yearless date string | MM-DD | 11-12 |
| Valid time string | HH:MMHH:MM:SSHH:MM:SS.mmm | 23:5912:15:4712:15:52.998 |
| Valid local date and time string | YYYY-MM-DDHH:MMYYYY-MM-DDHH:MM:SSYYYY-MM-DDHH:MM:SS.mmmYYYY-MM-DDTHH:MMYYYY-MM-DDTHH:MM:SSYYYY-MM-DDTHH:MM:SS.mmm | 2013-12-25 11:121972-07-25 13:43:071941-03-15 07:06:23.6782013-12-25T11:121972-07-25T13:43:071941-03-15T07:06:23.678 |
| Valid time-zone offset string | Z+HHMM+HH:MM-HHMM-HH:MM | Z+0200+04:30-0300-08:00 |
| Valid global date and time string | Any combination of a valid local date and time string followed by a valid time-zone offset string | 2013-12-25 11:12+02001972-07-25 13:43:07+04:301941-03-15 07:06:23.678Z2013-12-25T11:12-08:00 |
| Valid week string | YYYY-WWW | 2013-W46 |
| Four or more ASCII digits | YYYY | 2013,0001 |
| Valid duration string | PdDThHmMsSPdDThHmMs.XS | P12DT7H12M13SP12DT7H12M13.3SP12DT7H12M13.45SP12DT7H12M13.455SPT7H12M13SPT7H12M13.2SPT7H12M13.56SPT7H12M13.999S7d 5h 24m 13s |
Examples
Basic example
HTML
<p>The concert starts at <time datetime="2018-07-07T20:00:00">20:00</time>.</p>Result
datetime example
HTML
<p> The concert took place on <time datetime="2001-05-15T19:00">May 15</time>.</p>Result
Technical summary
| Content categories | Flow content,phrasing content, palpable content. |
|---|---|
| Permitted content | Phrasing content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that acceptsphrasing content. |
| Implicit ARIA role | time |
| Permitted ARIA roles | Any |
| DOM interface | HTMLTimeElement |
Specifications
| Specification |
|---|
| HTML # the-time-element |
Browser compatibility
See also
- The
<data>element, allowing to signal other kind of values.