<time> - date/time representation

<time> is a semantic tag introduced in HTML5, specifically designed to clearly mark date or time content. It not only enhances code readability but also provides structured data support for machines (such as search engines and screen readers).

Basic Syntax of <time>

The <time> tag uses the datetime attribute to provide a machine-readable standardized time format, while the content inside the tag displays a human-readable date or time. The basic structure is as follows:

<time datetime="YYYY-MM-DDThh:mm:ss±hh:mm">Display content</time>

Here, datetime follows the ISO 8601 format standard. For example:

<time datetime="2023-10-05">October 5, 2023</time>
<time datetime="15:30">3:30 PM</time>
<time datetime="2023-10-05T15:30+08:00">3:30 PM during the National Day holiday in 2023</time>

Detailed Rules for the datetime Attribute

1. Date-Only Format

<time datetime="2023-10-05">The first Thursday of October</time>

• Year: 4 digits
• Month: 01-12
• Day: 01-31

2. Time-Only Format

<time datetime="15:30:45.250">3:30 PM</time>

• Hours: 00-23
• Minutes: 00-59
• Seconds: 00-59
• Milliseconds: Optional, separated by a decimal point

3. Combined Date and Time

<time datetime="2023-10-05T15:30">Tea time on National Day</time>

• Use the uppercase letter T to separate the date and time

4. Timezone Representation

<time datetime="2023-10-05T15:30+08:00">3:30 PM Beijing Time</time>

• +08:00 represents UTC+8
• Z represents UTC time

Practical Use Cases

News Publication Timestamp

<p>
  Latest news published at
  <time datetime="2023-10-05T08:00+08:00">8 AM today</time>
</p>

Event Countdown

Combined with JavaScript for dynamic calculation:

<time id="countdown" datetime="2023-12-31T23:59:59"></time>

<script>
  const target = new Date('2023-12-31T23:59:59');
  setInterval(() => {
    const now = new Date();
    const diff = target - now;
    document.getElementById('countdown').textContent = 
      `${Math.floor(diff/(1000*60*60*24))} days ${Math.floor((diff/(1000*60*60))%24)} hours`;
  }, 1000);
</script>

Historical Event Timeline

<ul>
  <li>
    <time datetime="1969-07-20">July 20, 1969</time>
    - First human moon landing
  </li>
  <li>
    <time datetime="1989-11-09">November 9, 1989</time>
    - Fall of the Berlin Wall
  </li>
</ul>

Integration with Microdata

Enhance SEO with the itemprop attribute:

<div itemscope itemtype="http://schema.org/Event">
  <h2 itemprop="name">Developer Conference</h2>
  <time itemprop="startDate" datetime="2023-11-15T09:00">9 AM on November 15</time>
  to
  <time itemprop="endDate" datetime="2023-11-17T18:00">6 PM on November 17</time>
</div>

Styling Examples

The <time> tag can be styled like any other HTML element:

<style>
  time {
    background-color: #f0f8ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
  }
  time:hover {
    background-color: #e1f5fe;
  }
</style>

<p>
  Meeting time:
  <time datetime="2023-10-10T14:00">2 PM on October 10</time>
</p>

Browser Compatibility Notes

While modern browsers support the <time> tag, older versions of IE require compatibility handling:

<!--[if lt IE 9]>
  <script>
    document.createElement('time');
  </script>
<![endif]-->

Comparison with Other Time-Related Elements

Difference from the <data> Tag

<!-- Generic data annotation -->
<data value="12345">Order ID: 12345</data>

<!-- Specific time annotation -->
<time datetime="2023-10-05">Today</time>

Semantic Difference from <span>

<!-- No semantic meaning -->
<span>October 5, 2023</span>

<!-- Explicit time semantics -->
<time datetime="2023-10-05">October 5, 2023</time>

Dynamic Time Update Example

Implement an auto-updating "Last Edited" timestamp:

<time id="lastModified" datetime=""></time>

<script>
  const timeElement = document.getElementById('lastModified');
  const now = new Date();
  
  timeElement.setAttribute('datetime', now.toISOString());
  timeElement.textContent = `Last updated: ${now.toLocaleString()}`;
  
  // Update every minute
  setInterval(() => {
    const updated = new Date();
    timeElement.textContent = `Last updated: ${updated.toLocaleString()}`;
  }, 60000);
</script>

Internationalized Time Handling

Display localized time formats for different regions:

<time datetime="2023-12-25T00:00Z" id="xmas"></time>

<script>
  const xmas = document.getElementById('xmas');
  const date = new Date(xmas.getAttribute('datetime'));
  
  xmas.textContent = new Intl.DateTimeFormat(navigator.language, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    timeZoneName: 'short'
  }).format(date);
</script>

Complete Calendar Event Example

Create a meeting invitation with timezone conversion:

<div class="event">
  <h3>Online Tech Talk</h3>
  <p>
    Time:
    <time datetime="2023-11-20T19:00+08:00" id="event-time">
      November 20, 2023, 19:00 (GMT+8)
    </time>
  </p>
  <button onclick="convertTimezone()">Convert to My Timezone</button>
</div>

<script>
  function convertTimezone() {
    const timeElement = document.querySelector('#event-time');
    const datetime = timeElement.getAttribute('datetime');
    const localTime = new Date(datetime).toLocaleString([], {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      timeZoneName: 'short'
    });
    timeElement.textContent = localTime;
  }
</script>