The HTML <time> element is the accessible, machine-readable way to mark up a date or time on a web page. It pairs a precise datetime attribute (which crawlers and assistive technology can parse) with a friendly visible label that a screen reader reads aloud. This tool takes any ISO 8601 string and produces both halves correctly, so your dates are simultaneously accurate for machines and clear for people.
How it works
An ISO 8601 value such as 2026-06-06T14:30:00Z is unambiguous but hard to read. The tool parses it with the browser’s Date constructor, then:
- Keeps the original ISO string as the
datetimeattribute so parsers retain full precision. - Formats a human-readable label using the
Intl.DateTimeFormatAPI in your chosen locale and verbosity. - Wraps the result as
<time datetime="2026-06-06T14:30:00Z">Saturday, 6 June 2026, 14:30</time>.
Because screen readers announce the text node and ignore the datetime attribute, the visible label is what determines how the date is spoken. A bare 2026-06-06 would be read digit-by-digit; a formatted label is read naturally.
Why the <time> element matters for accessibility
Screen readers like NVDA, JAWS, and VoiceOver read whatever text is inside the element — they do not interpret the datetime attribute. So if your markup is:
<time datetime="2026-06-06">2026-06-06</time>a screen reader announces “two thousand twenty-six hyphen zero six hyphen zero six” — an awkward listening experience. But:
<time datetime="2026-06-06">Saturday, 6 June 2026</time>is announced naturally: “Saturday, sixth of June, twenty twenty-six.” The datetime attribute still carries the machine-readable precision for parsers; the visible text node carries the human-readable form.
Worked examples
Date-only (article publication date):
Input: 2026-06-06
<time datetime="2026-06-06">6 June 2026</time>Full datetime with UTC offset (event start time):
Input: 2026-06-06T14:30:00+01:00
<time datetime="2026-06-06T14:30:00+01:00">
Saturday, 6 June 2026 at 14:30 BST
</time>Compact form for a table or timeline:
Input: 2026-06-06
<time datetime="2026-06-06">Jun 6, 2026</time>Choosing verbosity for context
| Context | Recommended visible format | Rationale |
|---|---|---|
| Article byline or blog post | Long: “Saturday, 6 June 2026” | Prose reads naturally when spoken aloud |
| Event listing | Include time: “6 June 2026 at 14:30” | Users need both date and time |
| Compact table or timeline | Short: “6 Jun 2026” or “Jun 6” | Space-constrained; context makes year clear |
| Relative label already visible (“yesterday”) | Keep datetime precise, visible text can be relative | Machine still gets exact date |
SEO and structured data benefit
Correct <time datetime="..."> markup is also read by search engines when parsing Event, Article, and Review schema. A properly formatted datetime attribute helps Google, Bing, and others extract publication dates and event times for rich results. The ISO 8601 value in datetime is the canonical input for most structured-data parsers.
Tips and edge cases
- Always keep a valid ISO value in
datetimeeven when the visible text is abbreviated — that is what makes the markup machine-readable. - For date-only values, omit the time from the label so screen readers do not announce a misleading midnight time.
- When the user’s timezone matters, include the offset in the
datetimeattribute and express it in the visible label so both are consistent. - The
datetimeattribute accepts a subset of ISO 8601; it does not accept duration or interval strings, only date, time, and datetime values.