HTML time Tag: Representing Dates and Times

The HTML time Tag marks time values in a document. Use it to show dates or times that machines and users can read.

Understand the <time> Tag in HTML

The <time> tag shows a date or duration in a way that machines understand. It does not show a clock. It shows a point in time or a time span.

Search engines read the <time> tag better. Devices use it for reminders, calendars, or feeds. It helps screen readers say time info clearly. Browsers do not show it differently.

Here is the syntax:

<time datetime="YYYY-MM-DD">Text visible to users</time>

The tag has one main attribute. The text inside the tag shows a readable format. The datetime attribute holds the machine-readable value.

So, how does the datetime attribute work?

The datetime value must use a strict format. Use full dates or times. Use this structure:

• Date: YYYY-MM-DD
• Time: hh:mm:ss
• DateTime: YYYY-MM-DDThh:mm:ss
• Duration: PnYnMnDTnHnMnS (ISO 8601)

You must write the value in full. Do not leave out zeros. Use T to split date and time.

Here is a quick example:

<time datetime="2025-12-25">25 December 2025</time>

This shows a date to users. The browser reads it as a time point. Take this one. It shows the time:

<time datetime="14:00">2:00 PM</time>

This shows the time in a readable way. The datetime value keeps the strict format.

Do not use the <time> tag for vague words like “tomorrow” or “soon.” Use it only for exact values. Avoid it in places with no machine-read value.

How to Style the <time> Tag with CSS

The tag looks plain by default. You can style it like any inline element.

For example:

time {
  color: #0055aa;
  font-weight: bold;
  font-style: italic;
}

You can also use custom icons or borders to mark the time visually.

Browser Support and Fallback Tips

Modern browsers support the <time> tag. This includes many browsers. Older versions ignore it but still show the text. To ensure fallback:

• Wrap readable text inside <time>
• Never hide text in the datetime value

The tag does not break layout or hide info in unsupported browsers.

Examples

Date and Time for Event Start:

<time datetime="2025-08-20T18:30">August 20 at 6:30 PM</time>

This marks a full date with a time. Use it for event pages or schedules. Devices can extract exact timestamps.

Duration of Video:

<time datetime="PT3M45S">3 minutes 45 seconds</time>

This shows a duration in ISO 8601 format. It works for media files. Machines understand the total time without confusion.

Recurrence Time with Only Time Value:

<time datetime="07:45:00">7:45 AM</time>

This example uses only the time part. Use it for routine tasks or transport schedules.

Publish Date of an Article:

<time datetime="2025-07-19">Published July 19, 2025</time>

This shows the date of publication. Search engines extract the publication date. It helps sort content by age.

Wrapping Up

In this article, you learned what the <time> tag does and how it works. You also saw when to use it and how to write the correct format.

Here is a quick recap:

• Use <time> for exact dates and times
• Always add the datetime attribute
• Style it with CSS like any inline element
• Support is strong in all modern browsers

FAQs

Similar Reads