Using the HTML `` Element to Specify Dates and Times: Enhancing Accessibility and Data Handling

Learn how to use the HTML `` element to semantically mark up dates and times in your web content. This tutorial explains the importance of the `datetime` attribute for machine readability, improves accessibility for assistive technologies, and demonstrates best practices for representing temporal data.

Using the HTML `` Element to Specify Dates and Times

Understanding the `` Element

The HTML `` element is designed to represent a specific date and/or time. This adds semantic meaning to your HTML, making your pages more understandable for both users and machines (like search engines and assistive technologies). While the `` element doesn't change how the date or time is displayed by default, it's crucial for accessibility and for providing structured data that other applications can interpret and use to organize information, such as calendar applications. The date and time are displayed in a human-readable format, and the machine-readable format is provided by using the `datetime` attribute.

Using the `` Element

To mark up a date and/or time, place the date and time within the `` tags. The `datetime` attribute provides a machine-readable version of the date and time using the ISO 8601 format (YYYY-MM-DDThh:mm:ssTZD).

<p>The meeting is at <time datetime="2024-03-15T14:30:00">2 PM</time>.</p>

In this example, "2 PM" is displayed to the user, but the browser also has the machine-readable version available which allows it to be used by other applications. The `datetime` attribute is crucial for applications needing to interpret the date and time programmatically.

Browser Support for ``

The `` element is supported by all major modern browsers.

Attributes of the `` element

The `` element also supports standard HTML global attributes and event attributes.