HTML <time> Tag

The <time> tag is one of the HTML5 elements. It marks up a moment in time or a span of time so that it is both readable by people and parsable by machines. It can represent one of the following:

a human-readable time on a 24-hour clock,
a precise date in the Gregorian calendar (with optional timezone and time information),
a duration.

The <time> tag should not be used for dates that are prior to the introduction of the Gregorian calendar.

Why use `<time>`? The machine-readable angle

The visible text inside a <time> element stays free-form and human-friendly — you can write "Next Friday", "September 28", or "in two hours". The optional datetime attribute carries a strict, machine-readable version of that same moment so software can understand it precisely:

Search engines read datetime to build smarter, time-aware results (for example, showing event dates in rich snippets).
Calendar tools and browsers can offer "add to calendar" reminders because they know the exact instant, not just the words.
Scripts and assistive technology can reformat, localize, or compare the value reliably.

If you omit the datetime attribute, the element's text content itself must be a valid date/time string — and in that case the element must not contain any nested elements, only text.

Syntax

The <time> element requires both opening and closing tags. The content is written between the opening <time> and closing </time> tags.

Example of the HTML `<time>` tag:

HTML <time> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>The game will be held on <time datetime="2018-09-28T19:00">September 28</time>.</p>
    <p>It will start at <time>19:00</time></p>
  </body>
</html>

Try it Yourself »

In the first paragraph the datetime attribute holds the precise machine value while the visible text reads "September 28". In the second, there is no datetime attribute, so the text 19:00 is itself the machine-readable value.

The `datetime` formats

The datetime attribute must contain a valid date/time string, following the ISO 8601 conventions that HTML uses. Here are the common, copy-paste-ready formats:

What it represents	Example value	Notes
Date	`2024-03-15`	Year-Month-Day.
Year and month	`2024-03`	Day omitted.
Time only	`14:30`	24-hour clock, optional `:ss`.
Date and time (UTC)	`2024-03-15T14:30:00Z`	`T` separates date and time; `Z` means UTC.
Date and time with offset	`2024-03-15T14:30:00+02:00`	Timezone offset from UTC.
Duration	`PT2H30M`	"2 hours, 30 minutes".
Duration (days)	`P2D`	"2 days".
Week	`2024-W11`	The 11th ISO week of 2024.

A duration always starts with P (period); a T precedes the time components, so PT2H30M is read as 2 hours and 30 minutes, while P2D is 2 days.

Example: a time-only value

Here the visible text is also the machine value, so no datetime attribute is needed.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>Doors open at <time>09:00</time> sharp.</p>
  </body>
</html>

Example: a duration

Use the datetime attribute with a P/PT value to mark up how long something lasts.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>The recipe needs <time datetime="PT2H30M">2 hours and 30 minutes</time> in the oven.</p>
  </body>
</html>

Attributes

Attribute	Value	Description
datetime	`YYYY-MM-DD`, `YYYY-MM-DDThh:mm`, `hh:mm`, etc.	Specifies the time/date in a machine-readable format. The value must follow a valid date/time string format (e.g., ISO 8601). Timezone offsets like `+02:00` or `Z` are also supported.

The <time> tag also supports the Global Attributes.

Note: The pubdate attribute was previously supported but was deprecated and removed in later HTML specifications.

Styling `<time>`

The <time> element is inline and unstyled by default, so it looks like the surrounding text. A useful trick is the attribute selector time[datetime], which targets only the elements that carry a machine-readable value — for example, to surface the exact value on hover via a title, or to give those instants a subtle visual cue.

/* Highlight only <time> elements that have a datetime attribute */
time[datetime] {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

HTML <data> Tag — the general-purpose counterpart for non-temporal machine-readable values.
HTML5 Elements Reference — the full list of elements introduced in HTML5.

Practice

Which statement about the HTML time element is correct?

The datetime attribute holds a machine-readable value while the element text stays human-readable.time is a block-level element.The time element cannot represent a duration.The global attributes are not supported on the time element.A datetime value of PT2H30M is invalid.

Why use <time>? The machine-readable angle

Syntax

Example of the HTML <time> tag:

The datetime formats