time

The time element represents a specific period in time, providing a machine-readable datetime value while displaying a human-readable format to users.

Description

The <time> element represents a specific moment or range of time. It allows you to encode dates and times in a machine-readable format via the datetime attribute while displaying human-friendly text. This enables browsers, search engines, and applications to parse and utilize temporal data.

Semantic Meaning

The time element provides semantic temporal information:

  • Machine-readable datetime for search engines and applications
  • Calendar integration possibilities
  • Consistent date handling across locales
  • Schema.org and microdata compatibility

When to Use

  • Publication dates: Blog posts, articles, news
  • Event times: Meetings, appointments, concerts
  • Deadlines: Due dates, expiration dates
  • Historical dates: Birthdays, anniversaries, historical events
  • Durations: Length of videos, podcasts, events

When NOT to Use

  • Vague time references: "Last week", "Soon" (no specific datetime)
  • Non-Gregorian dates: Dates that can't be represented in ISO 8601

Variants

Default

Standard time element with tabular numeric font for consistent digit widths.

Published on

<time datetime="2024-01-15">January 15, 2024</time>

.relative

Muted, smaller text for relative time displays (typically updated by JavaScript).

Posted

<time class="relative" datetime="2024-01-15">2 days ago</time>

.datetime

Monospace font for technical datetime displays.

Timestamp:

<time class="datetime" datetime="2024-01-15T14:30:00">2024-01-15 14:30:00</time>

Live Examples

Date Formats

Full date:

Short date:

Numeric:

European:

Time Formats

12-hour:

24-hour:

With seconds:

Date and Time Combined

Meeting:

With timezone:

Year and Month

Year only:

Month and year:

Durations (ISO 8601)

Video length:

Short video:

Multi-day event:

Blog Post Metadata

Understanding the Time Element

Published | Updated

Event Listing

Web Development Workshop

Date:

Time: -

Duration:

Historical Dates

The Moon landing occurred on .

World Wide Web invented:

datetime Attribute Formats

The datetime attribute uses ISO 8601 format:

Format Example Represents
YYYY 2024 Year
YYYY-MM 2024-01 Month
YYYY-MM-DD 2024-01-15 Date
HH:MM 14:30 Time
YYYY-MM-DDTHH:MM 2024-01-15T14:30 Date and time
YYYY-MM-DDTHH:MM:SS 2024-01-15T14:30:00 With seconds
...Z 2024-01-15T14:30:00Z UTC timezone
...+HH:MM 2024-01-15T14:30:00+05:30 With timezone offset
PTXHXMXS PT2H30M Duration

CSS Properties

Default

Property Value
font-variant-numeric tabular-nums

.relative Variant

Property Value
color var(--color-text-muted)
font-size var(--font-size-sm)

.datetime Variant

Property Value
font-family var(--font-mono)
font-size 0.9em

Accessibility

  • Screen readers: Read the visible text content (human-readable part)
  • Machine parsing: The datetime attribute enables assistive technologies to parse dates accurately
  • Timezone clarity: Include timezone information when relevant to avoid ambiguity
  • Relative times: Update relative times dynamically or provide the actual date as a fallback

Related Elements

  • <data> - For machine-readable values that aren't dates/times
  • <del> / <ins> - Often use datetime attribute for edit timestamps