time Element in HTML - Machine-Readable Dates and Timestamps

HTML <time> Element: Human-Friendly, Machine-Readable Dates

Dates tell a story. Whether you're marking a blog post's publish date, highlighting an event, or counting down to something exciting — time matters. And the <time> element gives your dates and timestamps structure, meaning, and clarity — for both readers and machines.

What Is the <time> Element?

The <time> element is used to represent a specific time, date, or duration in HTML. It makes the content semantically recognizable for search engines, screen readers, and scripts — thanks to the optional datetime attribute that provides a standardized format.

Basic Syntax

<p>Published on <time datetime="2025-05-24">May 24, 2025</time>.</p>

Published on May 24, 2025.

The visible text is friendly for humans. The datetime attribute makes it clear for machines.

Why Use <time>?

• SEO boost: Search engines use structured time for indexing and ranking
• Accessibility: Assistive technologies can relay dates/times meaningfully
• Machine processing: JavaScript, calendars, feeds, and crawlers rely on structured dates

Example: Event Timestamp

<h2>Cherry Festival Begins</h2>
<p>Join us on <time datetime="2025-06-01T10:00">June 1st at 10 AM</time> for the opening ceremony.</p>

Join us on June 1st at 10 AM for the opening ceremony.

This timestamp uses both date and time: 2025-06-01T10:00.

Acceptable datetime Formats

• YYYY-MM-DD → 2025-05-24
• YYYY-MM-DDThh:mm → 2025-05-24T14:30
• hh:mm → 14:30 (for durations or times of day)
• PTnHnM → PT2H30M (ISO 8601 duration format: 2 hours 30 minutes)

Example: Duration Format

<p>This apple picking tour lasts <time datetime="PT1H30M">1 hour and 30 minutes</time>.</p>

This apple picking tour lasts 1 hour and 30 minutes.

Blog Post Metadata Example

<article>
  <h2>Health Benefits of Bananas</h2>
  <p>Posted on <time datetime="2025-05-20">May 20, 2025</time> by FruitDaily.</p>
</article>

Accessibility Tips

• Always use datetime for structured support
• Display friendly text inside the tag for visual users
• Ensure <time> wraps only the relevant text — not entire paragraphs

Use Case: Future Event Countdown

<p>Next cherry shipment arrives on <time datetime="2025-07-15">July 15th, 2025</time>.</p>

Next cherry shipment arrives on July 15th, 2025.

Summary

The <time> element is your semantic shortcut to clarity and machine-readability. You’ve now learned how to:

• Use <time> for events, durations, and publish dates
• Write proper datetime values
• Improve accessibility and SEO with structured timestamps

What’s Next?

Coming up next: the <mark> element — highlight important text and guide the reader’s eye to what matters most.