HTML time datetime: give a readable date an exact meaning

Use <time datetime="2026-11-12T14:30:00-05:00"> when a page shows a specific instant with a known UTC offset. Keep the date, clock time and zone understandable in the visible wording too. The attribute supplies a machine-readable value; it does not convert the displayed text or create a calendar appointment.

For an original maintenance notice, “Thursday afternoon” is too vague for someone planning a delivery. The notice below names the start, expected duration and service location:

<p>
  The loading dock closes on
  <time datetime="2026-11-12T14:30:00-05:00">
    November 12, 2026, at 2:30 p.m. Eastern Standard Time
  </time>.
  Allow <time datetime="PT45M">45 minutes</time> for the work.
</p>

The timestamp represents 19:30 UTC. The duration represents 45 minutes, not a second scheduled instant. A reader can understand the notice without a script, a tooltip or knowledge of ISO date syntax. MDN's time reference, checked October 24, 2026, documents both timestamp and duration formats.

Choose the value that matches what you actually know

A publication date needs only a date:

<p>Published <time datetime="2026-10-24">October 24, 2026</time>.</p>

An opening hour can use a clock time without pretending it is one worldwide instant:

<p>The desk opens at <time datetime="09:00">9 a.m.</time> local time.</p>

A local date and time such as 2026-11-12T14:30 has no zone offset. Add an offset when the content identifies a particular instant for readers in different places. Z means UTC; it does not mean “the reader's local time.” Avoid inserting Z merely to make a string look complete.

An offset such as -05:00 also does not name a geographic time zone or encode its future daylight-saving rules. If a recurring appointment follows New York time, keep that scheduling rule in the application's actual calendar model. One fixed-offset HTML value cannot express every occurrence of the series.

Keep the visible date and datetime together

Changing only the visible November 12 to November 13 leaves conflicting information in the page. Generate both representations from the same event record, and check both when updating the notice.

In the browser console, this reads the machine value separately from the wording:

const start = document.querySelector('time[datetime*="T"]');
console.log(start.dateTime);
console.log(start.textContent.trim());
console.log(new Date(start.dateTime).toISOString());
// 2026-11-12T19:30:00.000Z

Use the last conversion only for a complete timestamp with an offset, as in this example. Do not feed every valid HTML duration or yearless date to new Date() and assume it understands the HTML microsyntax.

The semantic HTML guide explains choosing elements by meaning. For this notice, finish by checking the date, Eastern Standard Time wording and expected closure duration against the actual maintenance record. A correct tag cannot repair a wrong appointment time.

Keep reading