The time Element

The <time> element marks a date, time, or duration in a machine-readable format, while still displaying human-friendly text.

Syntax & Example

<p>Published on <time datetime="2026-08-15">15 August 2026</time></p>

Browser output: just shows "15 August 2026" as plain text — the datetime attribute is invisible to readers but readable by machines (browsers, search engines, calendar/assistant apps).

Durations

<p>Course length: <time datetime="PT40H">40 hours</time></p>

The datetime attribute follows ISO 8601 format — PT40H means "a period of time, 40 hours."

Why Bother — Isn't Plain Text Enough?

A human reads "15 August 2026" or "yesterday" easily. A machine can't reliably parse either without a defined format. <time datetime="..."> gives you both: natural, flexible display text for people, and a precise, unambiguous value for machines — useful for search engine rich results (like showing a publish date next to a search result) and browser features that recognize dates.

Common Mistakes

• Omitting the datetime attribute — without it, <time> provides no real benefit over a plain <span>
• Using an ambiguous or incorrect date format in datetime (must be a valid ISO 8601-based format, not a locale-specific string like "8/15/26")
• Wrapping vague relative text like "recently" in <time> without a real datetime value — defeats the purpose

Interview Relevance

Less commonly asked, but a good "do you know the lesser-used semantic elements" signal — most candidates default to <span> for dates without knowing <time> exists.

Practice Question

Mark up "Last updated: 3 days ago" using <time> with a correct, precise datetime attribute.

Related HTML Notes

• Structured Data
• Semantic HTML