HTML Datetime Attribute

What is the HTML datetime attribute?

The datetime attribute indicates the date and time associated with an HTML element.

It is usually used in conjunction with the time element, but it can also be used with other elements such as del and ins.

The value of the attribute should be a date and time in the format specified in the HTML5 specification, which is YYYY-MM-DDTHH:mm:ss.

Applicable Elements

The datetime attribute can be used with the following elements:

• <del>
• <ins>
• <time>

HTML <del> datetime Attribute

The <del> tag indicates the content has been removed from the document. Browsers will display the <del> element with a line running through it, like this.

The datetime attribute, when used with the <del> element, specifies the date and, optionally, the time that the text was deleted.

Syntax

<del datetime="2009-10-10T23:38-07:00">deleted</del>

Usage

• The datetime’s attribute’s value must be a valid date string with optional time.

Values

Values can include:

• A valid datetime string. See here for a full list.

Example: Using the datetime Attribute with the <del> Element

Here is an example of using the datetime attribute with the del element to specify the time of deletion of some text:

<p>There are some <del datetime="2022-01-01T00:00:00" 
cite="Demonstrating del element">deleted words</del> in this paragraph</p>

In this example:

• The <del> element indicates that text has been deleted from a document.
• The datetime attribute can be used with the <del> element to specify the date and time the text was deleted.
• The value of the datetime attribute should be a date and time in the format YYYY-MM-DDTHH:mm:ss.
• In the code example, the <del> element indicates that the text “deleted” has been removed from the document.
• The datetime attribute specifies that the text was deleted at midnight on January 1st, 2022.
• The datetime attribute does not affect the rendering of the <del> element, but it provides information about the date and time at which the text was deleted.
• The cite attribute is used to provide a source of information about the deletion of the text.

HTML <ins> datetime Attribute

The <ins> tag indicates the content has been inserted into the document. Browsers will display the ins element as underlined.

The datetime attribute, when used with the <ins> element, specifies the date and, optionally, the time the text was inserted.

Syntax

<ins datetime="2009-10-10T23:38-07:00">inserted words</ins>

Usage

• The datetime’s attribute’s value must be a valid date string with optional time.

Values

Values can include:

• A valid datetime string. See here for a full list.

Example: Using the datetime Attribute with the <ins> Element

The example shows the date and time the text was marked as inserted.

<p>There are some <ins datetime="2022-01-01T00:00:00" 
cite="Demonstrating ins element">inserted words</ins> in this paragraph</p>

In this example:

• The <ins> element indicates that text has been added to a document.
• The datetime attribute can be used with the <ins> element to specify the date and time the text was added.
• The value of the datetime attribute should be a date and time in the format YYYY-MM-DDTHH:mm:ss.
• In the code example provided, the <ins> element is used to indicate that the text “inserted” has been added to the document.
• The datetime attribute specifies that the text was inserted at midnight on January 1st, 2022.
• The datetime attribute does not affect the rendering of the <ins> element, but it provides information about the date and time the text was added.

HTML <time> datetime Attribute

A <time> element represents a specific date, time, or duration. It must adhere to a valid syntax. You can specify a more readable (non-valid syntax) date or time by placing a valid version in an optional datetime attribute.

The datetime attribute, when used with the <time> element, specifies a machine-readable format of the <time> element.

Syntax

<time datetime="2021-03-05 20:00">Friday</time>

Usage

• The datetime’s attribute’s value must be a valid date string with optional time.

Values

Values should be both:

• A date in the Gregorian Calendar and
• A valid datetime string. See here for a full list.

Example: Using the datetime Attribute with the <time> Element

The example shows an example using the <time> element with the datetime attribute.

<p>I am going to the movies on <time datetime="2021-03-05 20:00">Friday</time>.</p>

In this example:

• The <time> element is used to represent a specific point in time.
• The datetime attribute can be used with the <time> element to specify the date and time the element represents.
• The value of the datetime attribute should be a date and time in the format YYYY-MM-DDTHH:mm:ss.
• In the code example provided, the <time> element represents the date and time “2021-03-05 20:00”.
• The datetime attribute specifies that the <time> element represents March 5th, 2021 at 8:00 PM.
• The text between the <time> element tags, “Friday”, is displayed to the user.

Specification

The datetime HTML specification for each of the following elements is below:

• del, ins

  • HTML Living Standard Specification

• time

  • HTML Living Standard Specification

Browser Support

The datetime has the following browser support:

Desktop

Mobile