<time>

Overview

The <time> element in HTML encapsulates specific time-related information. It can denote precise dates, times, durations, or even time-zone offsets, transforming them into a format that can be understood by machines. This machine-readable format allows for more accurate indexing by search engines and facilitates the potential integration with tools and applications, such as calendar services.

While the <time> element doesn't affect how the content is displayed to users, it adds a semantic understanding that helps software applications interpret time-related data more effectively.

Examples and Usage

Building on the overview, we'll explore a practical example to represent specific dates, times, and even durations. Inspired by the 50th anniversary celebration of Pablo Picasso's death, we'll demonstrate the versatile usage of the datetime attribute, and highlight some of the available formats.

<p>
  Museums in the U.S. and Europe will participate in the "Picasso Celebration 1973-2023" on <time datetime="2023-04-08">April 8</time>.
</p>

<p>
  The event culminates in a symposium at UNESCO in Paris on <time datetime="2023-12-01T09:00+01:00">December 1st, starting at 9:00 am local time</time>, and expected to last <time datetime="PT6H">6 hours</time>.
</p>

Note: The exact date, start time, and duration mentioned in the second paragraph are fictional and included for demonstration purposes.

To purely highlight the crucial information within the <time> tags we added a bit of CSS:

time {
  font-weight: bold;
}

Here's a breakdown of how the <time> is used in the setup above:

• The first <time> tag denotes the date of the "Picasso Celebration 1973-2023" (2023-04-08), adhering to the YYYY-MM-DD format, representing April 8th, 2023.

• The second <time> tag specifies the starting time of the December symposium in Paris (2023-12-01T09:00+01:00), using a valid global date and time string, including date, time, and time zone offset for Central European Time (CET).

• The third <time> tag represents the expected duration of the symposium (PT6H), using a valid duration string in the PTH format, representing a period of 6 hours.

In this context, the datetime attribute within the <time> tags defines the machine-readable representation of the date or time. It follows specific formats, and if absent, the machine-readable value is derived from the element's text content without any element descendants.

For those interested in exploring more specific use cases and understanding all possible formats, the official specification provides a detailed guide. (scroll below the initial definitions).

Please note that the <time> should not be used for dates prior to the introduction of the Gregorian calendar due to complications in calculating those dates.

Attribute Breakdown

The <time> element supports global attributes and includes the following specific attribute:

The datetime value must match one of the specified syntaxes described in the official specification.

Accessibility Aspects

In general, there are no specific accessibility considerations or concerns associated with the <time> element.

Detailed information on ARIA roles, states, and properties for the <time> element can be found here.

Associated Elements

• <data>

Additional Notes

• As we observed in the example, both opening and closing tags are mandatory for the <time> element to function correctly.

• The <time> element and the datetime attribute are widely supported across modern browsers, with consistent behavior and rendering.

• Handling dates and times in programming and markup languages, including HTML, can be complex. Various formats, time zones, daylight saving time adjustments, and other factors contribute to the complexity.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: time

The HTML Living Standard Specification: time