Tag time

🕒 HTML <time> Tag — Representing Dates and Times

The <time> tag in HTML is used to represent a specific point in time or a time duration. It allows browsers, search engines, and assistive technologies to understand dates and times in a machine-readable format, improving accessibility and SEO.

📌 What Is the <time> Tag?

  • Represents a specific date, time, or duration.
  • Can include a datetime attribute specifying the date/time in a standard format (ISO 8601).
  • Helps browsers and tools parse and interpret time-related content correctly.
  • Can be used for events, publication dates, deadlines, or durations.

✅ Basic Syntax

<time datetime="2025-06-15T18:30">June 15, 2025, 6:30 PM</time>

🧪 Example 1: Displaying a Date

<p>Event date: <time datetime="2025-07-20">July 20, 2025</time></p>

🧪 Example 2: Displaying a Time

<p>Meeting time: <time datetime="2025-07-20T14:00">2:00 PM</time></p>

🧩 Attributes of <time>

AttributeDescription
datetimeSpecifies the machine-readable date/time value (required for best use)

🎨 Styling <time>

The <time> element can be styled like any inline element:

time {
  background-color: #e0f7fa;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: bold;
  font-family: monospace;
}

⚠️ Best Practices

  • Always include the datetime attribute for better machine readability.
  • Use ISO 8601 format in the datetime attribute:
    • Date only: YYYY-MM-DD
    • Date and time: YYYY-MM-DDThh:mm:ss
  • Use <time> to mark up dates, times, durations, or date ranges in your content.
  • Improves SEO by helping search engines understand important date/time info.
  • Supports accessibility tools in announcing temporal information accurately.

🏁 Summary

The <time> tag semantically marks dates and times in HTML, improving clarity for machines and users alike. Including the datetime attribute ensures that your content is understood correctly by browsers, search engines, and assistive technologies.