HTML <time> Tag

The HTML <time> tag represents a specific point in time, a duration of time, or a recurring time in a document. It is used to provide semantic meaning to time-related data, making it machine-readable and improving accessibility for applications like calendars, event planners, or search engines.

The <time> tag can include an optional datetime attribute, which specifies the machine-readable format of the time or date.

Basic Syntax of HTML <time> Tag

The basic structure of the <time> tag is:

</>
Copy
<time datetime="YYYY-MM-DDThh:mm:ssTZD">Human-readable time</time>

Here, the datetime attribute is used to specify a machine-readable format of the time.

Example of a Specific Point in Time

The following example uses the <time> tag to specify an event’s date:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>The event will take place on <time datetime="2024-12-25">December 25, 2024</time>.</p>
    </body>
</html>

Explanation: The datetime attribute specifies the date in a machine-readable format (2024-12-25), while the text inside the <time> tag provides a human-readable version.

Example of Duration

The <time> tag can also represent durations using the datetime attribute:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>The estimated travel time is <time datetime="PT2H30M">2 hours and 30 minutes</time>.</p>
    </body>
</html>

Explanation: The datetime attribute uses the ISO 8601 format (PT2H30M) to represent a duration of 2 hours and 30 minutes.

Recurring Time Example

Recurring events can also be marked up using the <time> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>The team meeting is held every <time datetime="2024-12-12T10:00:00">Thursday at 10:00 AM</time>.</p>
    </body>
</html>

Explanation: The datetime attribute specifies a recurring time using a specific date and time format.

Styling the <time> Tag with CSS

You can style the <time> tag to visually emphasize the time or date:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            time {
                font-weight: bold;
                color: #007BFF;
            }
        </style>
    </head>
    <body>
        <p>The deadline is <time datetime="2024-12-31">December 31, 2024</time>.</p>
    </body>
</html>

Result: The time or date displayed by the <time> tag is styled with bold text and a blue color for emphasis.

Attributes of HTML <time> Tag

  • datetime: Specifies a machine-readable format for the time or date. It supports ISO 8601 formats for dates (YYYY-MM-DD), times (hh:mm:ss), durations (PT1H30M), and more.
  • Global Attributes: Supports all global attributes such as id, class, and style.

Practical Applications of the <time> Tag

  • Event Scheduling: Mark up event dates and times for clarity and search engine optimization.
  • Accessibility: Provide machine-readable time formats for screen readers and assistive technologies.
  • Dynamic Applications: Use the datetime attribute for calendar systems, reminders, or scheduling software.
  • SEO: Enhance search engine visibility by tagging important dates and times in structured formats.