HTML datetime Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The datetime attribute in HTML is used to specify the date and time when the text enclosed within an element refers to a specific time. This attribute is particularly useful with elements like <time>, which explicitly represents a time or date in a document. The datetime attribute helps to provide a machine-readable format of the date and time, ensuring that browsers and search engines can understand and process the date and time information correctly.

The value of the datetime attribute must be in a valid date string format, which is defined by the ISO 8601 standard. This standard covers a wide range of date and time formats, including purely date-based formats (e.g., "YYYY-MM-DD"), purely time-based formats (e.g., "HH:MM:SS"), and combined date and time formats (e.g., "YYYY-MM-DDTHH:MM:SS"). This flexibility allows web developers to specify precise times, dates, or even durations.

For example, to mark up a blog post's publication date in a human-readable format while also including a machine-readable format, you could use the <time> element with the datetime attribute like this:

<p>Posted on <time datetime="2024-03-29">March 29, 2024</time></p>

In this example, the content "March 29, 2024" is presented to the user, while the datetime attribute provides the same date in a format that can be easily processed by software. This ensures both accessibility and machine readability, enhancing the semantic richness of web content.

Syntax

<tagname datetime="YYYY-MM-DDThh:mm:ssTZD" >

Values

  • YYYY-MM-DDThh:mm:ssTZDThe date and time attached to the element. The format can be broken down as follows:
    • YYYY: Represents the year with four digits (e.g., 2024)

    • MM: Represents the month with two digits (e.g., 03 for March)

    • DD: Represents the day of the month with two digits (e.g., 29)

    • T: Separator between date and time (required if time is specified)

    • hh: Represents the hour in 24-hour format (e.g., 12 for noon)

    • mm: Represents the minutes with two digits (e.g., 00)

    • ss: Represents the seconds with two digits (e.g., 00)

    • TZD (Optional): Represents the time zone designator

      • Z: Denotes Zulu Time (GMT/UTC)
      • You can also specify offsets like "+07:00" for 7 hours ahead of UTC

Applies To

The datetime attribute can be used on the following html elements.

Example

<p>This article was last updated on <time datetime="2024-03-29T11:58:00Z">Friday, March 29, 2024</time>.</p>

Browser Support

The following table will show you the current browser support for the HTML datetime Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 29th March 2024