time 标签的 datetime 属性必须严格使用 ISO 8601 格式,如“2024-10-05”或“2024-10-05T14:30:22+08:00”,否则语义失效;显示文本可任意(如“今天上午九点”),但 datetime 必须为确定的绝对时间,不可用“今天”等相对表述;无 datetime 属性则 time 标签无机器可读语义。

time 标签的 datetime 属性必须用 ISO 8601 格式
datetime 属性不是随便写个“2024-10-5”或“10/5/2024”就能生效的。浏览器只认严格符合 ISO 8601 的字符串,否则语义丢失、屏幕阅读器无法识别、搜索引擎可能忽略时间信息。
常见错误包括:"2024-5-10"(月/日没补零)、"2024/10/05"(用了斜杠)、"2024-10-05 14:30"(缺 T 分隔符和时区)。正确写法必须是:
-
"2024-10-05"(日期) -
"2024-10-05T14:30"(本地时间,隐含时区,不推荐) -
"2024-10-05T14:30:22Z"(UTC 时间) -
"2024-10-05T14:30:22+08:00"(东八区明确偏移)
显示文本可以和 datetime 完全不同
的核心价值在于分离「机器可读时间」和「人类可读文案」。显示内容(即标签内文字)可以是中文、缩写、甚至带单位,只要 datetime 属性合规即可。
比如下面这段完全合法:
立即学习“前端免费学习笔记(深入)”;
注意:datetime 里不能写“今天”“上周五”这类相对表述——它必须是确定的、可解析的绝对时间点。
JavaScript 动态生成 datetime 值要小心时区
用 new Date().toISOString() 最安全,它直接返回带 Z 的 UTC 字符串;但若想用本地时区,别直接拼接 getFullYear() 等方法——容易漏补零、错算时区偏移。
推荐做法:
- 需要 UTC:用
date.toISOString() - 需要本地带偏移:用
date.toLocaleString("sv-SE", { timeZoneName: "short" })不行,得手动构造;更稳的是用Intl.DateTimeFormat或第三方库如date-fns的formatISO配{ format: "extended" } - 避免
date.toString()或date.toUTCString()——它们不是 ISO 8601 格式,不能塞进datetime
不加 datetime 属性的 time 标签几乎没用
只写 是无效的。没有 datetime,这个标签对机器来说就是普通文字,起不到时间语义化作用,Accessibility 和 SEO 都不认。
另外注意:datetime 是唯一允许的属性,class、id 可以加,但 data-*、aria-* 不能替代它的功能。
真正要用好 ,关键就一条:先确保 datetime 是机器能无歧义解析的 ISO 字符串,其余都是次要的。漏掉这步,其他都白搭。











