On a blog post you might display a publish date like "August 20, 2026", or on an event page a webinar time like "2:30 PM". A human reader understands instantly, but a browser, a search engine or an automatic calendar sees only a string of characters with no inherent meaning: nothing tells it that this is a date, let alone which exact date on the universal calendar it refers to.
The <time> tag solves this: it pairs, inside a single element, a human-readable text with a machine-readable value in ISO 8601 format, stored in the datetime attribute. The displayed text can stay casual, the hidden value stays precise and universal.
Definition
<time> is a semantic tag that marks content as a date, a time, a combined date and time, or a duration. It changes nothing about the text's default appearance: its purpose is structural, not visual. Wrapping "August 20, 2026" in this tag explicitly tells the browser, extensions and search crawlers "this is a temporal value", something plain text can never claim on its own.
It is in fact a special case of <data>, the generic tag that pairs a machine-readable value with displayed content. Where <data> can represent any identifier, such as a product code or a serial number, <time> is reserved for dates, times and durations, and the browser knows exactly what to do with it, such as offering to add an event to a calendar.
Syntax and attributes
The datetime attribute carries the machine value, in ISO 8601 format. The content between the opening and closing tags stays free and can be written in any language or wording, as long as it stays understandable to your visitors.
| What you want to express | datetime attribute format | Example |
|---|---|---|
| A date alone | YYYY-MM-DD | datetime="2026-08-20" |
| A time alone | HH:MM | datetime="14:30" |
| Combined date and time | YYYY-MM-DDTHH:MM | datetime="2026-08-20T14:30" |
| A duration | PnDTnHnMnS | datetime="PT2H30M" |
For an event happening in a specific time zone, the attribute also accepts an offset, like datetime="2026-08-20T14:30+02:00". That is what lets a calendar app propose the correct local time, even if your visitor is on the other side of the world.
Concrete example
Here is how to date a blog post, with a publish date and an update date, two very common uses on a site.
<p>
Published on <time datetime="2026-08-15">August 15, 2026</time>, updated on
<time datetime="2026-08-20">August 20, 2026</time>.
</p>The displayed text ("August 15, 2026") stays whatever you want to show, while the datetime attribute gives the browser a value it can sort, compare or pass to another program without ambiguity.
Semantics and accessibility
For a screen reader, the visible text is generally announced as written: a visually impaired visitor hears "August 15, 2026", not the raw attribute value. The real benefit of <time> shows up elsewhere, with tools that do not "read" in the human sense: a search engine can surface your publish date in its results, a browser extension can offer to add your event to a calendar, and a voice assistant can correctly answer "when was this article published".
This automated reading relies entirely on the ISO 8601 format of the datetime attribute. A malformed value, like datetime="August 20, 2026", is recognized by none of these tools: it is treated as a plain string, exactly as if the <time> tag were not there at all.
The displayed text and the datetime attribute do not have to be identical, but they must describe the same date. Writing <time datetime="2026-08-20">today</time> is perfectly valid on the day itself, but becomes misleading if the page stays online without being regenerated the next day: the word "today" is still shown while the date it referred to is already in the past.
Common use cases
You will run into <time> anywhere a temporal value matters to a program, not just to a human eye. A publish or update date on an article, an event's start date, a recipe's cooking time, or a countdown clock before a limited offer ends are all common examples.
In every case, the logic stays the same: the text remains written for your visitors, and the datetime attribute makes that same information usable elsewhere, without you having to duplicate it in a separate hidden format.
Frequently asked questions
datetime attribute?In practice, almost always yes. The specification tolerates omitting datetime if the displayed text is already written in a format the standard recognizes, but that is rarely the case for a date written in prose like "August 20, 2026". Always adding the attribute removes any ambiguity and guarantees that automated tools understand your content correctly.
time for a duration, like "2 hours 30", instead of a precise date?Yes, that is a use case the specification explicitly supports. The datetime attribute also accepts a duration format, like datetime="PT2H30M" for two hours and thirty minutes. You will see this format on pages showing a cooking time, a video's length, or a trip's duration, with displayed text like "2h30".
time and a plain span around the date?A <span> carries no particular meaning: to a browser or a search engine, it is just a neutral wrapper, no different from unmarked text. The <time> tag, on the other hand, explicitly declares "this is a temporal value" and provides, through datetime, a version programs can use. That declaration of meaning, invisible on screen but readable by machines, makes all the difference.