The <time> Element
As defined in the HTML Living Standard, the <time> element represents its contents, along with a machine-readable form of those contents in its datetime attribute. The contents of the element must be either a valid date, a valid time, or a valid duration.
Publication Date:
Relative Date: This audit was performed .
Event Time: The webinar begins at .
<p>
The next release is scheduled for <time datetime="2026-05-15">May 15th</time>.
</p>
View HTML Living Standard: The time element
The datetime Attribute
The datetime attribute is not always required, but it is highly recommended for accessibility. It provides the machine-readable value that browsers and assistive technologies use to process the time.
- Dates:
YYYY-MM-DD(e.g.,2026-04-13) - Times:
HH:MMorHH:MM:SS(e.g.,19:45) - Durations: Prefixed with
P(e.g.,PT2H30Mfor 2 hours and 30 minutes).
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Using <time> with a datetime attribute ensures that the relationship between a vague visual expression (like "two days ago") and a specific point in time is programmatically available. This allows calendar apps to import events directly, search engines to index publication dates accurately, and assistive tools to provide precise timestamps to users who might struggle with relative time expressions.
Best Practices
- Avoid for non-time data: Do not use
<time>for dates that aren't specific points in time, like "The Jurassic Period" or generic years that aren't specific dates. Use<data>for those cases. - Consistency: Following SMACSS Base Rules, you should style
<time>elements consistently across your site to help users recognize that these strings represent interactive or structured temporal data. - Machine-Readable Formats: Always use the ISO 8601 format within the
datetimeattribute to ensure maximum compatibility across different software and locales.
A11y Tip: Calendar Integration
Some browser extensions and assistive devices can detect the <time> element and offer to add the event to the user's personal calendar automatically. Using the correct semantic markup makes your content more interactive and useful for all users.