<time>

Definition and Usage

The <time> element establishes a specific time (or datetime) in a machine-readable format.

This element can be used to encode dates and times in a way that makes them readable by both humans and machines. This is useful for:

• Adding events to calendars
• Search engines understanding publication dates
• Browser features like reminders
• Screen readers announcing dates properly
• Time-based sorting and filtering

Attributes

The <time> tag also supports the Global Attributes in HTML.

The <time> tag also supports the Event Attributes in HTML.

Examples

Basic Date

Display a simple date:

<p>The meeting is scheduled for <time datetime="2025-01-15">January 15, 2025</time>.</p>

Date and Time

Include both date and time:

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

Date and Time with Timezone

Specify the timezone:

<p
  >Conference call: <time datetime="2025-03-10T14:00:00-05:00"
    >March 10, 2025 at 2:00 PM EST</time
  >.</p
>

Relative Time

Display relative time with absolute datetime:

<p>Posted <time datetime="2025-01-01T12:00:00">yesterday</time></p>

<p>Updated <time datetime="2025-01-15T09:30:00">2 hours ago</time></p>

Duration

Represent a duration using the PT format:

<p>The movie runtime is <time datetime="PT2H30M">2 hours and 30 minutes</time>.</p>

<p>Cooking time: <time datetime="PT45M">45 minutes</time></p>

Publication Date

Mark publication dates for articles:

<article>
  <header>
    <h2>Understanding HTML5 Semantic Elements</h2>
    <p>Published on <time datetime="2025-01-15" pubdate>January 15, 2025</time></p>
  </header>
  <p>Content of the article...</p>
</article>

Event Dates

Create a calendar event listing:

<div class="event"
  >
  <h3>Web Development Workshop</h3>
  <p
    >Date: <time datetime="2025-04-22">April 22, 2025</time></p
  >
  <p
    >Time: <time datetime="10:00">10:00 AM</time
    > - <time datetime="16:00">4:00 PM</time></p
  >
</div
>

Formatted Dates with CSS

Style time elements with CSS:

<style>
  time {
    background-color: #f0f0f0;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    color: #745af2;
    font-family: monospace;
  }

  time.urgent {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef5350;
  }

  time.past {
    opacity: 0.6;
    text-decoration: line-through;
  }
</style>

<p>Deadline: <time datetime="2025-01-31" class="urgent">January 31, 2025</time></p>
<p>Completed: <time datetime="2024-12-15" class="past">December 15, 2024</time></p>

Try it Yourself

Datetime Format (ISO 8601)

The datetime attribute must use the ISO 8601 format. Here are the common formats:

Accessibility and SEO Benefits

Using the <time> element provides several benefits:

• Screen Readers: Assistive technologies can properly announce dates and times
• Search Engines: Better understanding of temporal information for improved search results
• Rich Snippets: Search engines can display dates in special formats in search results
• Calendar Integration: Browsers can offer to add events to calendars
• Internationalization: Browsers can format dates according to user's locale preferences
• Sorting and Filtering: Enables better sorting by date in web applications
• Microdata: Can be combined with Schema.org markup for enhanced SEO

Use Cases

1. Event Scheduling

<div class="event-card"
  >
  <h3>Annual Conference 2025</h3>
  <p
    >Starts: <time datetime="2025-09-15T09:00:00"
      >September 15, 2025 at 9:00 AM</time
    ></p
  >
  <p
    >Ends: <time datetime="2025-09-17T17:00:00"
      >September 17, 2025 at 5:00 PM</time
    ></p
  >
</div
>

2. Publication Dates

<article>
  <h1>Breaking News: New HTML Features Released</h1>
  <p>By John Developer</p>
  <p>Published: <time datetime="2025-01-15T10:00:00">January 15, 2025</time></p>
  <p>Last Updated: <time datetime="2025-01-20T15:30:00">January 20, 2025</time></p>
</article>

3. Duration and Elapsed Time

<div class="recipe">
  <h3>Chocolate Cake</h3>
  <p>Prep time: <time datetime="PT20M">20 minutes</time></p>
  <p>Cook time: <time datetime="PT35M">35 minutes</time></p>
  <p>Total time: <time datetime="PT55M">55 minutes</time></p>
</div>

Best Practices

• Always use the datetime attribute for machine-readable dates
• Use ISO 8601 format for the datetime attribute
• Display human-readable text inside the <time> element
• Use for publication dates, event dates, and durations
• Include timezone information when relevant for global audiences
• Combine with Schema.org microdata for enhanced SEO
• Use consistent date formatting throughout your site
• Consider user's locale when displaying dates (can be done with JavaScript)
• Don't use for arbitrary numbers or non-temporal data

Schema.org Integration

Combine the <time> element with Schema.org markup for enhanced SEO:

<div
  itemscope
  itemtype="https://schema.org/Event"
  >
  <h2 itemprop="name">Summer Music Festival</h2
  >
  <p
    >Date: <time
      itemprop="startDate"
      datetime="2025-07-15T18:00:00"
      >July 15, 2025 at 6:00 PM</time
    ></p
  >
  <p itemprop="location">Central Park, New York</p
  >
</div
>

Default CSS Settings

Most browsers will display the <time> element with the following default values:

time {
  display: inline;
}

Related Tags

• <data>

  Links content with machine-readable value

• <abbr>

  Defines an abbreviation or acronym

• <ins>

  Defines inserted text with datetime

• <del>

  Defines deleted text with datetime

• <meta>

  Defines metadata about an HTML document

• <article>

  Defines independent content