HTML time and data: pair readable copy with machine-readable values

Use it for a real task

The receipt page shows a localized review deadline while keeping an ISO-formatted dateTime attribute for parsers. Its state label also carries a stable code. Neither attribute validates a business rule; the application must still decide when the deadline expires and who can approve.

<p>Review by <time datetime="2026-10-23">23 October 2026</time>.</p>
<p>Status: <data value="awaiting-review">Awaiting review</data>.</p>

What the markup guarantees

The visible date must agree with datetime. If the deadline includes a time zone, include the offset in the machine value and explain the local time to the reader; a bare calendar date is not a universal instant.

Cost and limits

These attributes cost almost nothing to render. Their maintenance cost is synchronization: changing the visible copy without updating the machine value creates conflicting facts.

Common Mistakes

• Do not put an incompatible date in datetime.
• A state code in data is metadata, not an authorization check.
• Do not treat a local date as an exact instant without a time zone.

Connected lessons

• HTML title and metadata: distinguish document identity from page copy
• HTML article and section: mark standalone content and named subdivisions
• Python datetime: require an offset before comparing timestamps

Related: HTML data element: pair visible labels with machine values.

Related: HTML ins and del: show an edit without falsifying current text.