<time>: The (Date) Time element #

::: section-content 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{target="_blank"} (with optional time and timezone information).
• A valid time duration{target="_blank"}. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <time> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

The Cure will be celebrating their 40th anniversary on July 7 in London’s Hyde Park.

<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>

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} time { font-weight: bold; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content Like all other HTML elements, this element supports the global attributes.

datetime

This attribute indicates the time and/or date of the element and must be in one of the formats described below. :::

Usage notes #

::: section-content 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).

The datetime value (the machine-readable value of the datetime) is the value of the element's datetime attribute, which must be in the proper format (see below). If the element does not have a datetime attribute, it must not have any element descendants, and the datetime value is the element's child text content. :::

Valid datetime values #

::: section-content

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 :::

Examples #

Simple example #

::: section-content

HTML #

::: code-example [html]{.language-name}

<p>The concert starts at <time datetime="2018-07-07T20:00:00">20:00</time>.</p>

:::

Result #

::: {#sect1 .code-example} ::: iframe ::: ::: :::

datetime example #

::: section-content

HTML #

::: code-example [html]{.language-name}

<p>
  The concert took place on <time datetime="2001-05-15T19:00">May 15</time>.
</p>

:::

Result #

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Specifications #

::: _table #

Specification #

HTML Standard
[# the-time-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

           Chrome    Edge   Firefox   Internet Explorer   Opera        Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

time 62 ≤18 22 No 4911.5–12 7 62 62 22 4611.5–12 4 8.0 datetime 62 ≤18 22 No 4911.5–12 7 62 62 22 4611.5–12 4 8.0 :::

See also #

::: section-content

• The <data> element, allowing to signal other kind of values. :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time{._attribution-link} :::