HTML time Tag

HTML <time> Tag: Representing Date & Time

The <time> tag in HTML is used to define dates, times, or durations in a machine-readable format. It helps search engines and browsers understand time-related information better.

1. Basic Syntax

<p>The event starts on <time datetime="2025-06-15">June 15, 2025</time>.</p>

✅ Displays: The event starts on June 15, 2025.
✅ Helps search engines & assistive technologies understand the date.

2. Attributes of <time>

Attribute	Description	Example
datetime	Machine-readable date/time format	<time datetime="2025-06-15">June 15, 2025</time>

3. Examples of <time> Usage

📌 Example 1: Full Date with datetime

<p>Published on <time datetime="2024-03-28">March 28, 2024</time>.</p>

✅ Search engines recognize March 28, 2024 correctly.

📌 Example 2: Time Representation

<p>The meeting is at <time datetime="14:30">2:30 PM</time>.</p>

✅ Helps browsers recognize 2:30 PM as a valid time.

📌 Example 3: Date & Time Combined

<p>Webinar starts on <time datetime="2025-06-15T14:30">June 15 at 2:30 PM</time>.</p>

✅ Uses ISO 8601 format (YYYY-MM-DDTHH:MM).

📌 Example 4: Duration Format

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

✅ Uses "PT2H30M" (ISO duration format).
✅ Helps search engines and voice assistants understand durations.

4. Styling <time> with CSS

<style>
  time {
    font-weight: bold;
    color: #007bff;
  }
</style>

<p>Event Date: <time datetime="2025-06-15">June 15, 2025</time></p>

✅ Makes the date bold & blue.

5. When to Use <time>

✅ Blog posts & news articles: Show publication dates.
✅ Events & schedules: Display event times in machine-readable format.
✅ Durations: Indicate time spans like cooking time, movie length, etc.

6. Conclusion

• The <time> tag improves SEO & accessibility.

• Use datetime for machine-readable formatting.

• Helps search engines & voice assistants understand time-related info.