← Back to All Tags

<time>

Defines a specific time or datetime

✨ HTML5

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
Tip: The datetime attribute is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.
Note: The <time> element is new in HTML5 and provides semantic meaning to dates and times, improving SEO and accessibility.

Browser Support

The <time> tag is supported in all major browsers:

Chrome
Chrome
62.0+
Firefox
Firefox
22.0+
Safari
Safari
7.0+
Edge
Edge
18.0+
Opera
Opera
49.0+

Attributes

Attribute Value Description
datetime YYYY-MM-DD
YYYY-MM-DDThh:mm:ss
YYYY-MM-DDThh:mm:ssTZD
PTnHnMnS		 Specifies the machine-readable date/time of the element in ISO 8601 format

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:

Example

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

Date and Time

Include both date and time:

Example

<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:

Example

<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:

Example

<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:

Example

<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:

Example

<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:

Example

<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:

Example

<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

Interactive Example

Here are live examples of the <time> element:

Event Date:
Published:
Duration:

Datetime Format (ISO 8601)

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

Format Example Description
YYYY-MM-DD 2025-01-15 Date only
YYYY-MM 2025-01 Year and month
YYYY 2025 Year only
hh:mm:ss 14:30:00 Time only (24-hour format)
YYYY-MM-DDThh:mm:ss 2025-01-15T14:30:00 Date and time (T separates date and time)
YYYY-MM-DDThh:mm:ssTZD 2025-01-15T14:30:00-05:00 Date, time, and timezone
PTnHnMnS PT2H30M Duration (2 hours 30 minutes)
Note: The "T" in datetime formats is a literal character that separates the date from the time. TZD stands for Time Zone Designator (Z, +hh:mm, or -hh:mm).

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

Example

<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

Example

<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

Example

<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:

Example

<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:

Default CSS

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