Does the tag change how a date looks?

No. Browsers display the text inside as normal text. The benefit is the hidden datetime value that machines can read.

Can I use without the datetime attribute?

Yes, but only if the text itself is already in a valid machine format, such as 2026-10-03 . For friendly text like "Oct 3", add datetime.

<time> Tag in HTML – Datetime Attribute & Live Example

Quick facts

Category	Flow content, phrasing content, palpable content
Content model	Phrasing content; if there is no datetime attribute, the text itself must be a valid date/time
Tag omission	Neither the start nor the end tag can be omitted
Permitted parents	Any element that accepts phrasing content
DOM interface	`HTMLTimeElement`

Syntax

<time datetime="2026-10-09T15:00">Friday at 3pm</time>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Common `datetime` formats

Value	Meaning
2026-10-09	A date
2026-10	A month
15:00	A time (24-hour clock)
2026-10-09T15:00	A date and time
2026-10-09T15:00Z	A date and time in UTC (or add an offset like +08:00)
PT2H30M	A duration: 2 hours 30 minutes

Attributes

Attribute	Description
datetime	The machine-readable date, time or duration. Required unless the element’s text is already in a valid format.

Common examples

A blog post date

Readers see a friendly date; the datetime attribute gives machines the exact ISO format.

Published <time datetime="2026-10-03">October 3, 2026</time>

An event with a start time

Add a time after a T. Include the time zone offset if visitors may be in other countries.

Webinar: <time datetime="2026-11-12T18:00-05:00">Nov 12, 6 pm EST</time>

A duration

Durations use the ISO format starting with P (period) — PT1H30M is 1 hour 30 minutes.

Cooking time: <time datetime="PT1H30M">1½ hours</time>

Showing “3 days ago” with JavaScript

Keep the exact date in datetime and let a script turn it into relative text.

<time datetime="2026-09-30" class="ago">September 30, 2026</time>

<script>
  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
  document.querySelectorAll("time.ago").forEach(t => {
    const days = Math.round((new Date(t.dateTime) - Date.now()) / 86400000);
    t.textContent = rtf.format(days, "day");
  });
</script>

<time> vs <data>

Both pair human-friendly text with a machine-readable value. <time> is only for dates, times and durations, and its datetime value must follow the ISO date format. <data> is for every other kind of value, such as a product number or a price, stored in its value attribute.

So “October 3” belongs in <time>, while “Small (SKU 4821)” belongs in <data value="4821">.

	<time>	<data>
For	Dates, times, durations	Any other value
Attribute	datetime	value
Format	ISO 8601	Anything

Common mistakes to avoid

A datetime in the wrong format. “03/10/2026” is ambiguous; always write 2026-10-03 (year-month-day).
Wrapping text that isn’t a date. “Soon” or “next season” can’t be turned into a precise value, so leave them as plain text.
Leaving out datetime on friendly text. “Last Tuesday” needs a datetime value, or machines can’t read it.
Forgetting the time zone for events. 18:00 means different moments around the world; add an offset like -05:00 or Z for UTC.

Accessibility & SEO tips

Show both published and updated dates on articles — readers trust fresh content, and search engines may show the date in results.
Match your visible dates to the datePublished and dateModified values in your structured data.
Write dates in a format your audience recognises; the datetime attribute takes care of machines.
Use <time> for opening hours and event schedules too, so calendar tools and assistants can read them reliably.

Browser support

Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds. The element itself has no default styling, so it looks like normal text everywhere.

Related tags

Frequently asked questions

Does the <time> tag change how a date looks?

No. Browsers display the text inside <time> as normal text. The benefit is the hidden datetime value that machines can read.

Does <time> help SEO?

It helps search engines and other tools understand dates on your page, such as when an article was published. For events, also add schema.org structured data so Google can show dates in search results.

How do I include a time zone?

Add Z for UTC (2026-10-09T15:00Z) or an offset from UTC (2026-10-09T15:00+08:00) at the end of the datetime value.

What format does the datetime attribute use?

ISO 8601: 2026-10-03 for a date, 2026-10-03T14:30 for a date and time, 2026-10-03T14:30Z for UTC, and PT2H for a duration of two hours.

Can I use <time> without the datetime attribute?

Yes, but only if the text itself is already in a valid machine format, such as <time>2026-10-03</time>. For friendly text like "Oct 3", add datetime.

How do I show the date in the visitor's own format?

Use JavaScript: new Date(t.dateTime).toLocaleDateString() formats the date for the visitor's language and region.

Can <time> be used for a year or a month only?

Yes. datetime="2026" means a year and datetime="2026-10" means October 2026, so you can mark up dates that aren't a specific day.

Can I put <time> inside other elements?

Yes. It's an inline element, so it fits inside paragraphs, headings, list items and table cells.