<time> represents a date, time, or duration with a machine-readable value. datetime lets visible text use a readable format while the attribute uses HTML’s date/time syntax.
Date and duration
Inspect the attributes: the date uses YYYY-MM-DD; the duration uses hours and minutes. The browser does not automatically create a calendar event or timer.
HTML and CSS
HTML
<p>Workshop date: <time datetime="2026-10-12">October 12, 2026</time>.</p>
<p>Length: <time datetime="PT2H30M">2 hours and 30 minutes</time>.</p>
<p>
Start in New York:
<time datetime="2026-10-12T10:00:00-04:00">10:00 a.m. EDT</time>.
</p>CSS
time {
font-weight: 600;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Formats and content
Valid forms include dates, yearless dates, months, years, week strings, clock times, local/global date-times, and durations. A date-time needs an explicit offset when it describes a moment that must be unambiguous across time zones. Do not invent a datetime value such as “next Tuesday.”
Time accepts phrasing content. When datetime is absent, its text must itself be a valid machine-readable value and it must have no element descendants. Use the attribute when the visible text is localized or includes markup.
Keep meaning accurate
datetime does not automatically localize the visible label or update daylight-saving offsets. Ensure label and value agree. Use data for a non-time machine-readable value. Copy the document and inspect the time elements in developer tools; changing the date attribute alone does not rewrite the visible date.
Sources and browser support
MDN: time describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.