The time element is specifically used to display time-based information with the basic syntax being <time datetime="YYYY-MM-DDThh:mm:ssTZD">.

Examples

Here are a few of the common ways in which we display time:

-

to -

to -

to -

to -

to -

Usage

Rules

  • When possible, use the <time> element with the datetime attribute when presenting a date or time so that the meaning of the date or time is clear to human users and machine readable. When machines can read the date or time it‘s useful for scheduling with a user‘s calendar, etc.

Constraints

  • The <time> element does not display time ranges, only single instances, which is why we use two elements to show a range

Principle

  • The <time> element is used to present dates and times in a machine readable format

Accessibility

  • You’ll notice that visually there’s an en-dash separating time ranges, but in the markup it looks like it should be the word “to.“ This is because screen readers handle special characters differently—and some don’t even read them—making the time difficult to audibly understand. The actual text will be read by screen readers and also be able to be copied/pasted.
  • Make sure that if the time element is not positioned directly within date or day context that the date is included within the datetime attribute. For additional accessibility that helps screen readers you can include the date in a .sr-only class which can often help with context.

Class Names

time-start
Modifier 		Use on the start time to ensure that it wraps as a unit instead of breaking apart the time stamp
time-to
Modifier 		Use on a <span>
time-end
Modifier 		Use on the end time to ensure that it wraps as a unit instead of breaking apart the time stamp