HTML datetime Attribute
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 designatorZ
: 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 | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 29th March 2024