<time> - The Time Element

The `<time>` Element

Inline HTML5

The time element represents a specific period in time or a duration. It provides a machine-readable datetime attribute while displaying human-readable content.

Quick Example

<p>Published on <time datetime="2024-12-11">December 11, 2024</time></p>
<p>Event starts at <time datetime="14:30">2:30 PM</time></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Published on <time datetime="2024-12-11">December 11, 2024</time></p>
<p>Event starts at <time datetime="14:30">2:30 PM</time></p>

Syntax

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

The datetime attribute contains an ISO 8601 formatted date/time that machines can parse.

Attributes

Core Attributes

Attribute	Description	Required
`datetime`	Machine-readable date/time	Recommended

Date Formats

Full Dates

<time datetime="2024-12-11">December 11, 2024</time><br>
<time datetime="2024-12-11">Dec 11, 2024</time><br>
<time datetime="2024-12-11">11/12/2024</time>

Result

Interactive code playground requires JavaScript. Here's the code:

<time datetime="2024-12-11">December 11, 2024</time><br>
<time datetime="2024-12-11">Dec 11, 2024</time><br>
<time datetime="2024-12-11">11/12/2024</time>

Year and Month

<time datetime="2024-12">December 2024</time><br>
<time datetime="2024">The year 2024</time>

Result

Interactive code playground requires JavaScript. Here's the code:

<time datetime="2024-12">December 2024</time><br>
<time datetime="2024">The year 2024</time>

Times

<time datetime="14:30">2:30 PM</time><br>
<time datetime="09:00">9:00 AM</time><br>
<time datetime="23:59">11:59 PM</time>

Result

Interactive code playground requires JavaScript. Here's the code:

<time datetime="14:30">2:30 PM</time><br>
<time datetime="09:00">9:00 AM</time><br>
<time datetime="23:59">11:59 PM</time>

Date and Time Combined

<time datetime="2024-12-11T14:30">December 11, 2024 at 2:30 PM</time><br>
<time datetime="2024-12-11T14:30:00">Dec 11, 2024, 2:30:00 PM</time>

Result

Interactive code playground requires JavaScript. Here's the code:

<time datetime="2024-12-11T14:30">December 11, 2024 at 2:30 PM</time><br>
<time datetime="2024-12-11T14:30:00">Dec 11, 2024, 2:30:00 PM</time>

With Timezone

<time datetime="2024-12-11T14:30:00-08:00">2:30 PM PST</time><br>
<time datetime="2024-12-11T14:30:00Z">2:30 PM UTC</time>

Result

Interactive code playground requires JavaScript. Here's the code:

<time datetime="2024-12-11T14:30:00-08:00">2:30 PM PST</time><br>
<time datetime="2024-12-11T14:30:00Z">2:30 PM UTC</time>

Common Use Cases

Blog Post Metadata

<article>
<h2>Understanding HTML5</h2>
<p>
  Published on <time datetime="2024-12-11">December 11, 2024</time>
  by Jane Doe
</p>
<p>Article content...</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h2>Understanding HTML5</h2>
<p>
  Published on <time datetime="2024-12-11">December 11, 2024</time>
  by Jane Doe
</p>
<p>Article content...</p>
</article>

Event Information

<div class="event">
<h3>Tech Conference 2024</h3>
<p>
  Date: <time datetime="2024-12-15">December 15, 2024</time><br>
  Time: <time datetime="09:00">9:00 AM</time> -
        <time datetime="17:00">5:00 PM</time>
</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="event">
<h3>Tech Conference 2024</h3>
<p>
  Date: <time datetime="2024-12-15">December 15, 2024</time><br>
  Time: <time datetime="09:00">9:00 AM</time> -
        <time datetime="17:00">5:00 PM</time>
</p>
</div>

Comment Timestamps

<div class="comment">
<p><strong>John Doe</strong></p>
<p>Great article!</p>
<footer>
  Posted <time datetime="2024-12-11T10:30:00">2 hours ago</time>
</footer>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="comment">
<p><strong>John Doe</strong></p>
<p>Great article!</p>
<footer>
  Posted <time datetime="2024-12-11T10:30:00">2 hours ago</time>
</footer>
</div>

Historical Dates

<p>World War II ended on <time datetime="1945-09-02">September 2, 1945</time>.</p>
<p>The Declaration of Independence was signed on <time datetime="1776-07-04">July 4, 1776</time>.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>World War II ended on <time datetime="1945-09-02">September 2, 1945</time>.</p>
<p>The Declaration of Independence was signed on <time datetime="1776-07-04">July 4, 1776</time>.</p>

Durations

<p>Video length: <time datetime="PT2H30M">2 hours 30 minutes</time></p>
<p>Cooking time: <time datetime="PT45M">45 minutes</time></p>
<p>Project duration: <time datetime="P3M">3 months</time></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Video length: <time datetime="PT2H30M">2 hours 30 minutes</time></p>
<p>Cooking time: <time datetime="PT45M">45 minutes</time></p>
<p>Project duration: <time datetime="P3M">3 months</time></p>

Real-World Examples

News Article

<article>
<h2>Breaking News</h2>
<p class="meta">
  <time datetime="2024-12-11T08:00:00-05:00">
    December 11, 2024 at 8:00 AM EST
  </time>
</p>
<p>News content goes here...</p>
<footer>
  Last updated:
  <time datetime="2024-12-11T10:15:00-05:00">
    10:15 AM EST
  </time>
</footer>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h2>Breaking News</h2>
<p class="meta">
  <time datetime="2024-12-11T08:00:00-05:00">
    December 11, 2024 at 8:00 AM EST
  </time>
</p>
<p>News content goes here...</p>
<footer>
  Last updated:
  <time datetime="2024-12-11T10:15:00-05:00">
    10:15 AM EST
  </time>
</footer>
</article>

Product Launch

<div class="product-launch">
<h3>New Product Coming Soon!</h3>
<p>
  Launch date:
  <time datetime="2025-01-15">January 15, 2025</time>
</p>
<p>
  Pre-orders start:
  <time datetime="2024-12-20">December 20, 2024</time>
</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="product-launch">
<h3>New Product Coming Soon!</h3>
<p>
  Launch date:
  <time datetime="2025-01-15">January 15, 2025</time>
</p>
<p>
  Pre-orders start:
  <time datetime="2024-12-20">December 20, 2024</time>
</p>
</div>

Meeting Schedule

<table>
<tr>
  <th>Meeting</th>
  <th>Time</th>
</tr>
<tr>
  <td>Stand-up</td>
  <td><time datetime="09:00">9:00 AM</time></td>
</tr>
<tr>
  <td>Team Sync</td>
  <td><time datetime="14:00">2:00 PM</time></td>
</tr>
<tr>
  <td>Retrospective</td>
  <td><time datetime="16:00">4:00 PM</time></td>
</tr>
</table>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<tr>
  <th>Meeting</th>
  <th>Time</th>
</tr>
<tr>
  <td>Stand-up</td>
  <td><time datetime="09:00">9:00 AM</time></td>
</tr>
<tr>
  <td>Team Sync</td>
  <td><time datetime="14:00">2:00 PM</time></td>
</tr>
<tr>
  <td>Retrospective</td>
  <td><time datetime="16:00">4:00 PM</time></td>
</tr>
</table>

Deadline Countdown

<div class="deadline">
<p>
  Project deadline:
  <time datetime="2024-12-31">December 31, 2024</time>
</p>
<p>
  Time remaining:
  <time id="countdown" datetime="P19D">19 days</time>
</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="deadline">
<p>
  Project deadline:
  <time datetime="2024-12-31">December 31, 2024</time>
</p>
<p>
  Time remaining:
  <time id="countdown" datetime="P19D">19 days</time>
</p>
</div>

Styling

Customize time element appearance:

<style>
time {
  font-weight: 600;
  color: #0066cc;
  border-bottom: 1px dotted #0066cc;
}
time:hover {
  background: #f0f8ff;
}
</style>

<p>Event: <time datetime="2024-12-15">December 15, 2024</time></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
time {
  font-weight: 600;
  color: #0066cc;
  border-bottom: 1px dotted #0066cc;
}
time:hover {
  background: #f0f8ff;
}
</style>

<p>Event: <time datetime="2024-12-15">December 15, 2024</time></p>

Calendar Style

<style>
.calendar-date {
  display: inline-block;
  text-align: center;
  padding: 8px;
  border: 2px solid #ddd;
  border-radius: 4px;
}
.calendar-date .month {
  display: block;
  font-size: 0.8em;
  color: #666;
}
.calendar-date .day {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
}
</style>

<time datetime="2024-12-11" class="calendar-date">
<span class="month">DEC</span>
<span class="day">11</span>
</time>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.calendar-date {
  display: inline-block;
  text-align: center;
  padding: 8px;
  border: 2px solid #ddd;
  border-radius: 4px;
}
.calendar-date .month {
  display: block;
  font-size: 0.8em;
  color: #666;
}
.calendar-date .day {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
}
</style>

<time datetime="2024-12-11" class="calendar-date">
<span class="month">DEC</span>
<span class="day">11</span>
</time>

Duration Format (ISO 8601)

Format	Meaning	Example
`PT#H`	Hours	`PT2H` = 2 hours
`PT#M`	Minutes	`PT30M` = 30 minutes
`PT#S`	Seconds	`PT45S` = 45 seconds
`PT#H#M`	Hours and minutes	`PT2H30M` = 2 hours 30 min
`P#D`	Days	`P7D` = 7 days
`P#M`	Months	`P3M` = 3 months
`P#Y`	Years	`P2Y` = 2 years

<p>Recipe time: <time datetime="PT1H30M">1 hour 30 minutes</time></p>
<p>Shipping: <time datetime="P3D">3 days</time></p>
<p>Warranty: <time datetime="P2Y">2 years</time></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Recipe time: <time datetime="PT1H30M">1 hour 30 minutes</time></p>
<p>Shipping: <time datetime="P3D">3 days</time></p>
<p>Warranty: <time datetime="P2Y">2 years</time></p>

JavaScript Integration

<p>
Published:
<time id="publish-time" datetime="2024-12-11T10:00:00">
  Loading...
</time>
</p>

<script>
const timeEl = document.getElementById('publish-time');
const date = new Date(timeEl.dateTime);
timeEl.textContent = date.toLocaleString();
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
Published:
<time id="publish-time" datetime="2024-12-11T10:00:00">
  Loading...
</time>
</p>

<script>
const timeEl = document.getElementById('publish-time');
const date = new Date(timeEl.dateTime);
timeEl.textContent = date.toLocaleString();
</script>

Accessibility

The datetime attribute provides screen readers with precise temporal information.

<time datetime="2024-12-11">12/11/24</time>

<time datetime="2024-12-11">December 11, 2024</time>

Combine with ARIA

<time datetime="2024-12-11" aria-label="December eleventh, two thousand twenty-four">
  12/11/2024
</time>

SEO Benefits

Search engines use <time> to understand when content was published, helping with:

Freshness ranking
Timeline features
Knowledge graph
Rich snippets

Browser Support

Browser	Version	Notes
Chrome	62+	Full support
Firefox	22+	Full support
Safari	7+	Full support
Edge	79+	Full support
IE	No	Not supported

The <time> element is an HTML5 feature with good modern browser support.

For other machine-readable values. Learn more →

For metadata including publication dates. Learn more →

<time> - The Time Element

The <time> Element

Quick Example

Syntax

Attributes

Core Attributes

Date Formats

Full Dates

Year and Month

Times

Date and Time Combined

With Timezone

Common Use Cases

Blog Post Metadata

Event Information

Comment Timestamps

Historical Dates

Durations

Real-World Examples

News Article

Product Launch

Meeting Schedule

Deadline Countdown

Styling

Calendar Style

Duration Format (ISO 8601)

JavaScript Integration

Accessibility

Screen Reader Benefits

Use Descriptive Text

Combine with ARIA

SEO Benefits

Browser Support

Related Elements

Specifications

The `<time>` Element