HTML <time> Tag

The <time> tag in HTML is used to represent a specific time or a date. It's a semantic element, meaning it adds meaning to your HTML structure, helping browsers and search engines better understand your content. Unlike text alone, the <time> tag allows machines to easily interpret the date and time, making it valuable for applications like event calendars, blog posts with publication dates, and scheduling tools.

Syntax

<time datetime="YYYY-MM-DDThh:mm:ssZ">Human-readable time/date</time>

Attributes

Example

<p>The concert starts at <time>8:00 PM</time> tonight.</p>

More Examples

Basic Date

<p>This article was published on <time datetime="2024-07-26">July 26, 2024</time>.</p>

This example shows how to use the <time> tag with a basic date, the datetime attribute provides the machine-readable date while the content provides the human readable date.

Date and Time

<p>The meeting is scheduled for <time datetime="2024-08-10T10:00">10:00 AM on August 10th</time>.</p>

Here, both date and time are provided. The datetime attribute is in the standard format.

Time with Timezone

<p>The live stream begins at <time datetime="2024-09-15T16:00-04:00">4:00 PM EDT</time>.</p>

This example demonstrates how to include a timezone offset with the datetime attribute. 04:00 refers to time in EDT. The Z suffix for UTC is also supported.

Using just a year

<p>The company was founded in <time datetime="2010">2010</time>.</p>

You can also use the tag to simply define a year using the datetime attribute.

Using just a month

<p>We will launch in <time datetime="2024-12">December, 2024</time>.</p>

You can use just a year and month also. Note that the textual format is more expressive here.

Time with Seconds

<p>The race started at exactly <time datetime="2024-07-26T15:30:45">3:30:45 PM</time>.</p>

In this example we used the full hour, minutes and seconds.

Relative Time (Not Machine Readable)

<p>The deadline is <time>tomorrow</time>.</p>

While the datetime attribute should be used for machine-readable formats, you can still use the <time> tag to indicate relative time when a machine-readable format isn't required. However, this practice is less effective for accessibility and machine processing and the datetime attribute is highly recommended to use.

Browser Support

Notes and Tips

• Always use the datetime attribute: For optimal accessibility and SEO, provide the machine-readable version of the date/time using the datetime attribute.
• Consistency: When using the datetime attribute, use a consistent date/time format.
• Human-readable format: Use clear and easily understandable human-readable formats in the content of the <time> tag.
• Accessibility: Screen readers and other assistive technologies can utilize the datetime attribute to understand the context of the date/time information.
• SEO: Search engines can also understand and utilize the structured data provided by the datetime attribute.
• Avoid relative terms in datetime: The datetime attribute should contain specific dates/times, not relative terms like "tomorrow" or "next week".
• Use with JavaScript: You can dynamically update time elements or modify the datetime attribute using JavaScript for more complex functionalities.