HTML <time> Tag for Dates, Times and Durations

The HTML <time> element represents a specific date, time, date-and-time value, time-zone offset, or duration. Use its datetime attribute when the visible text is written for people but you also want a machine-readable value.

For example, visitors can read “March 15, 2026” while software can read the standardized value 2026-03-15.

Basic <time> example Top ↑

<p>
  Registration closes on
  <time datetime="2026-03-15">March 15, 2026</time>.
</p>

The text between the tags is what users see. The datetime value provides the corresponding machine-readable representation.

Using the datetime attribute Top ↑

The datetime attribute should contain a valid date/time value that represents the visible content. Common formats include:

Date and time with a time zone Top ↑

Include a time-zone offset when the event happens at one precise moment for users in different locations.

<time datetime="2026-09-10T14:30+05:30">
  September 10, 2026 at 2:30 PM IST
</time>

For a local event whose time is intentionally tied to a place, a local date-time value without an offset can also be appropriate. Make the visible text clear enough for the audience to understand which time is intended.

Representing a duration Top ↑

The element can also represent a duration. The machine-readable value uses a duration syntax such as PT2H30M.

<p>
  Estimated completion time:
  <time datetime="PT2H30M">2 hours 30 minutes</time>
</p>

Can <time> be used without datetime? Top ↑

Yes, but when datetime is omitted, the element's text itself must be a valid machine-readable date/time value. In that case, it must contain text only, not nested elements.

<time>2026-03-15</time>

For human-friendly text such as “March 15, 2026”, using datetime="2026-03-15" is clearer and more reliable.

Practical uses of the time element Top ↑

• Article dates: publication and update dates shown to readers.
• Events: meetings, webinars, concerts, appointments, and deadlines.
• Schedules: opening times, departure times, or planned activities.
• Durations: estimated reading, processing, travel, or completion time.

The element adds semantic meaning, but it does not automatically create a calendar event, countdown, or time-zone conversion interface. Those behaviors require application logic or other tools.

Styling <time> with CSS Top ↑

<time> is an inline semantic element and can be styled like other inline content.

time {
  font-weight: 600;
  white-space: nowrap;
}

Use CSS for presentation; keep the actual date or time meaning in the HTML.

Reading a time value with JavaScript Top ↑

JavaScript can read the element's machine-readable value through its dateTime property.

const eventTime = document.querySelector('#event-time');
console.log(eventTime.dateTime);

For date and time scripting concepts, see the JavaScript Date object tutorial. Server-side date handling is also covered in PHP DateTime and Python date.

Accessibility guidance Top ↑

• Keep the visible date or time understandable without relying on the machine-readable value.
• Include a time zone in visible text when users could otherwise interpret the time differently.
• Avoid ambiguous numeric dates such as 03/04/2026 when the audience may use different date conventions.
• Do not assume that adding <time> alone will make a date clearer to every assistive technology user; good visible wording still matters.

Time element and search engines Top ↑

The <time> element gives dates and times semantic, machine-readable markup, which can help software understand temporal information. It is not a ranking shortcut and does not guarantee a special search-result treatment.

For article publication or modification dates, keep the visible date accurate and consistent with any structured data or other date information published on the page.

Common mistakes Top ↑

• Using a human-readable date in datetime instead of a valid machine-readable value.
• Showing one date to users while placing a different date in datetime.
• Leaving out the time zone when it matters to users in different locations.
• Using <time> for unrelated numeric values that are not dates, times, offsets, or durations.
• Assuming the element automatically performs calendar integration or time-zone conversion.

Frequently asked questions Top ↑

What is the HTML <time> tag used for? Top ↑

It represents dates, times, date-and-time values, time-zone offsets, or durations and can provide a machine-readable value through datetime.

Is the datetime attribute required? Top ↑

No. However, if it is omitted, the element's text itself must form a valid machine-readable value. Human-friendly date text generally benefits from an explicit datetime attribute.

How do I include a time zone in datetime? Top ↑

Add a valid offset such as +05:30 or use Z for UTC when representing a precise global date and time.

Can <time> represent a duration? Top ↑

Yes. For example, PT2H30M represents a duration of 2 hours and 30 minutes.

Does using <time> improve SEO rankings? Top ↑

It provides useful semantic markup, but using the element by itself does not guarantee higher rankings or special search features.

Related tutorials Top ↑

HTML5 tags | Types of HTML tags | JavaScript Date object | PHP DateTime | Python date

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: