HTML -

The <time> HTML element is used to represent dates, times, or durations in a machine-readable way, which is helpful for browsers, search engines, and accessibility tools.

 Purpose:

  • To mark up dates or times in human-readable text while also providing a standardized, machine-readable format via the datetime attribute.

  • It can represent:

    • A specific date (e.g., "2025-07-14")

    • A specific time (e.g., "14:30")

    • A full date-time (e.g., "2025-07-14T14:30")

    • A duration (e.g., "PT2H30M" for 2 hours, 30 minutes)

 Syntax:

<time datetime="2025-07-14">July 14, 2025</time>

datetime Attribute:

Purpose Format Example Description
Date YYYY-MM-DD 2025-07-14
Time hh:mm or hh:mm:ss 14:30 or 14:30:00
Date & Time YYYY-MM-DDThh:mm 2025-07-14T14:30 (T separates date and time)
Duration PnYnMnDTnHnMnS (ISO 8601 format) PT2H30M = 2 hours 30 minutes

 Example 1 – A Full Date:

<p>Event Date: <time datetime="2025-07-14">July 14, 2025</time></p>

 Example 2 – A Date and Time:

<p>Webinar starts at <time datetime="2025-07-14T19:00">7 PM on July 14</time></p>

 Example 3 – A Duration:

<p>Run Time: <time datetime="PT2H15M">2 hours 15 minutes</time></p>

 Benefits:

  • SEO: Helps search engines understand event or article times better.

  • Accessibility: Screen readers and other tools can process time data more effectively.

  • Machine-readability: JavaScript and other tools can extract and manipulate time data easily.