The Essential HTML Time Tag Guide (Quick and Easy)

December 29, 2023

||

1–2 minutes

The <time> tag helps define a particular time period on a webpage in a clear and semantic way. It offer a clear and structured representation to the content inside it, making it easy for both web browsers and assistive technologies to understand and interpret.

Syntax:

Attribute	Value
datetime	`<time datetime="YYYY-MM-DDThh:mm:ss"></time>`

More Possible Values:

Description	Example in Syntax
Year 1999	`<time datetime="1999"></time>`
Year 1999, Dec	`<time datetime="1999-12"></time>`
Year 1999, Dec, 31	`<time datetime="1999-12-31"></time>`
Year 1999, Dec, 31, 8:00am	`<time datetime="1999-12-31 08:00"></time>`
Year 1999, Dec, 31, 8:00:10 (with seconds)	`<time datetime="1999-12-31 08:00:10"></time>`
Year 1999, Dec, 31, 8:00:10.612 (with seconds + milliseconds)	`<time datetime="1999-12-31 08:00:10.612"></time>`
Dynamic
Jan, 01 on every year	`<time datetime="01-01"></time>`
Week 10 of Year 1999	`<time datetime="1999-W10"></time>`
8:00am on any day (Follow local’s time)	`<time datetime="08:00"></time>`
8:00am on any day (UTC+2)	`<time datetime="08:00+02:00"></time>`
A duration of 2 days	`<time datetime="P2D"></time>`
A duration of 10 hours and 30 minutes	`<time datetime="PT10H30M"></time>`

Example:

<p>Hello world, <time datetime="1999-01-01">Happy New Year 1999</time>!</p>

Benefits of Using `<time>` Tag:

Accessibility: The <time> tag enhances accessibility by providing a standardized format that can be easily interpreted by screen readers and other assistive technologies.
Search Engine Optimization (SEO): Search engines recognize and understand the <time> tag, potentially improving the visibility of time-related content in search results.
Consistency Across Platforms: The use of the ISO 8601 format in the datetime attribute ensures consistency across various platforms and devices.
Future Compatibility: As HTML is constantly evolving, using semantic tags like <time> may contribute more to future compatibility.

Browser compatibility


Chrome	Edge	Firefox	Safari	Opera	Chrome Android	WebView Android	iOS Safari	Firefox Android	Opera Android	Samsung Internet
62	18	22	7	49	62	62	4	22	46	8

souce: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

html