Path // www.yourhtmlsource.com → Reference → <time>

<time>

by Ross Shannon

The <time> element represents a specific period in time. It can include the datetime attribute to provide a machine-readable version of the date or time, enabling browsers, search engines, and other applications to understand the temporal information even when the visible text is human-friendly.

Clock This page was last updated on 2025-11-17


Syntax

<time datetime="machine-readable-date">human-readable date</time>

The element requires both opening and closing tags. If the datetime attribute is not present, the element's text content must be a valid date, time, or duration string.

Attributes

  • datetime - Machine-readable date/time value in ISO 8601 format. Accepts:
    • Date: 2024-01-15
    • Time: 14:30 or 14:30:00
    • Date and time: 2024-01-15T14:30:00
    • With timezone: 2024-01-15T14:30:00Z or 2024-01-15T14:30:00+05:30
    • Duration: P4D (4 days), PT2H30M (2 hours 30 minutes)
  • Global attributes - The <time> element supports all global attributes such as id, class, style, lang, and dir.

Examples

Publication Date

<p>Published on <time datetime="2024-03-15">March 15, 2024</time>.</p>

Event with Date and Time

<p>The concert starts at <time datetime="2024-06-20T19:30:00">7:30 PM on June 20th</time>.</p>

Time Only

<p>Our office hours are <time datetime="09:00">9 AM</time> to <time datetime="17:00">5 PM</time>.</p>

Duration

<p>The flight takes <time datetime="PT14H30M">14 hours and 30 minutes</time>.</p>

When to Use

Use the <time> element when:

  • Marking up publication or modification dates
  • Indicating event dates and times
  • Showing deadlines or due dates
  • Specifying durations (video length, travel time)
  • Creating machine-readable timestamps for SEO
  • Enabling calendar applications to extract event information

Benefits of using <time>:

  • Search engines can better understand your content
  • Screen readers can provide better context
  • Browser extensions can offer to add events to calendars
  • Dates can be automatically localized for users
  • <ins> - Uses datetime attribute for insertion timestamps
  • <del> - Uses datetime attribute for deletion timestamps
  • <data> - Links content with machine-readable translation
  • <address> - For contact information (not to be confused with time)