The time Element

Learn how to use the HTML <time> element to represent dates and times in a machine-readable format, improving accessibility and search engine optimization.

What it is

The <time> element represents a specific period in time. It may include a datetime attribute that provides a machine-readable version of the date or time, while the content between the tags offers a human-readable representation. This separation allows browsers, screen readers, and search engines to parse temporal data accurately without relying on ambiguous text formats.

Related terms: ISO 8601 (the standard for the datetime value), semantic HTML, microdata.

Why it matters

• Search Engine Optimization: Search engines can display rich snippets with precise publication dates or event times.
• Accessibility: Screen readers can announce dates clearly, avoiding confusion caused by varying regional date formats (e.g., MM/DD/YYYY vs DD/MM/YYYY).
• Data Interoperability: JavaScript libraries and other tools can easily extract and manipulate date values using the standardized datetime attribute.
• Consistency: Ensures that the displayed text and the underlying data remain synchronized even if the visual format changes.

Syntax or steps

The basic syntax requires an opening tag, optional attributes, content, and a closing tag. The most critical attribute is datetime, which must follow the ISO 8601 format.

<time datetime="YYYY-MM-DD">Human Readable Text</time>

For times, append the time component: YYYY-MM-DDThh:mm:ss. For durations, use the format PnYnMnDTnHnMnS.

Example

Here is a realistic example showing a blog post header with a publication date and an upcoming event duration.

<article>
  <header>
    <h1>Understanding Semantic HTML</h1>
    <p>Published on <time datetime="2023-10-27">October 27, 2023</time></p>
  </header>
  
  <p>The workshop will last for <time datetime="PT2H30M">2 hours and 30 minutes</time>.</p>
</article>

Part-by-part explanation:

• <time datetime="2023-10-27">: Defines the exact date as October 27, 2023, in ISO format.
• October 27, 2023: The visible text for users, which can be formatted however desired.
• <time datetime="PT2H30M">: Represents a duration of 2 hours and 30 minutes using the ISO 8601 duration format (P for Period, T for Time).

Common mistakes

• Invalid datetime format: Using local formats like "10/27/2023" in the attribute. Always use ISO 8601.
• Mismatched content: If the visible text says "Yesterday," but the datetime is static, the information becomes misleading over time. Use dynamic generation for relative dates.
• Omitting the attribute: While valid, omitting datetime when the text is not a clear date/time string reduces utility. Only omit it if the text itself is unambiguous and standard.
• Using <time> for non-temporal data: Do not use this element for numbers that are not dates, times, or durations.

When to use it

Compare <time> with plain text or <span>:

Use <time> whenever you have temporal data. Use <span> only for purely visual styling where no semantic meaning is required.

Practice

Guided Exercise: Write a paragraph stating that a meeting starts at 9:30 AM on January 5, 2024. Ensure the datetime attribute uses the correct ISO format including the time.

Hint: The format should look like 2024-01-05T09:30.

Challenge: Create a list of three upcoming holidays with their dates. Use <time> for each date so that a script could potentially sort them chronologically based on the attribute.

Quick check

Question: What is the primary purpose of the datetime attribute within the <time> element?

Answer: To provide a machine-readable, standardized (ISO 8601) representation of the date or time, independent of the human-readable text content.

Summary

The <time> element bridges the gap between human-friendly presentation and machine-friendly data processing. By consistently using ISO 8601 formats in the datetime attribute, you enhance accessibility, SEO, and data interoperability across your web applications.