Dofactory.com
Dofactory.com

HTML <time> Tag

The <time> tag defines a date or time.

This element is not visible, but automatic page readers, such as, screen readers and search engines, do have access.

Example

#

Two <time> tags that define dates.

Vincent Van Gogh was born , in Zundert, the Netherlands.
He died , (age 37) in Auvers-sur-Oise, France.

<style>
  .t {background:#fff3aa;}
</style>
<p>
  Vincent Van Gogh was born 
  <time datetime="1853-03-30" class="t">March 30, 1853</time>,
  in Zundert, the Netherlands.<br />He died 
  <time datetime="1890-07-29" class="t">July 29, 1890</time>,
  (age 37) in Auvers-sur-Oise, France. 
</p>

Using <time>

The <time> tag is meant to be used by automatic page readers, such as screen readers and search engines.

This element does not have any visual effect to the text.

More Examples

A <time> element accepts different formats: date, time, datetime, and time duration. This example has one of each.

This is a date: .
This is a time: .
This is a date-time: .
This is a duration: .

<p>
  This is a date: <time datetime="2020-08-07">August 7, 2020</time>.<br />
  This is a time: <time datetime="15:22">3:22 PM</time>.<br />
  This is a date-time: <time datetime="2021-04-19T11:30:00Z">April 19, 2021 at 11:30AM</time>.<br />
  This is a duration: <time datetime="PT1H30M">1 hr, 30 min</time>.<br />
</p>

Attributes for <time>

This table lists the <time> attributes.

Attribute Value Description
datetime datetime Defines the format of the time element
id   identifier Defines a unique identifier for the time element.
class   classnames Sets one or more CSS classes to be applied to the time element.
style   CSS-styles Sets the style for the time element.

For additional global attributes see our global attributes list.


Browser support

Here is when <time> support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like


Last updated on Sep 30, 2023




Guides