标签必须带符合ISO 8601规范的datetime属性才具语义有效性,仅文本内容无法被解析;支持日期型、日期时间型、周/年/月型三类格式,且需确保机器可读、逻辑一致、不嵌套。

time标签必须带datetime属性才有效
单独写 是无效的语义化标记,浏览器和屏幕阅读器无法解析时间含义。HTML5 要求 元素必须包含 datetime 属性,其值需为机器可读的 ISO 8601 格式。
常见错误包括:
- 用中文日期(如
2024年3月15日)直接填入datetime - 省略
datetime,只靠文本内容表达时间 - 格式不规范:漏掉时区、使用斜杠分隔(
2024/03/15)、缺零填充(2024-3-5)
正确写法示例:
datetime属性支持的三种ISO格式
datetime 值不是任意字符串,必须严格匹配 HTML5 规范定义的子集。主流支持以下三类:
立即学习“前端免费学习笔记(深入)”;
-
日期型:
YYYY-MM-DD(如2024-03-15),用于仅需日期的场景(发布日期、截止日) -
日期时间型:
YYYY-MM-DDThh:mm:ss±hh:mm(如2024-03-15T10:22:18+08:00),含时区,适合精确到秒的时间戳 -
周/年/月型:
YYYY-Www(第几周)、YYYY-MM(年月),适用于周期性事件(每周例会、2024年Q1报告)
注意:T 和 ± 是字面量,不可省略;时区若为本地时间且无明确偏移,建议显式写 +00:00 或使用 Z(UTC)。
time标签不负责格式化显示,样式由CSS控制
是纯语义容器,它不会自动把 2024-03-15 渲染成“2024年3月15日”,也不提供本地化格式转换。显示效果完全取决于你写的 CSS 或 JS。
常见误操作:
- 以为加了
就能自动汉化日期 —— 实际仍需 JS(如Intl.DateTimeFormat)或后端处理 - 用
替代却不加datetime,失去语义价值 - 在
datetime里塞冗余信息(如datetime="2024-03-15 (周五)"),违反机器可读原则
推荐搭配方式(保留语义 + 可读显示):
SEO与无障碍支持依赖完整结构
搜索引擎和读屏软件(如 NVDA、VoiceOver)会提取 datetime 值做时间排序或播报。但前提是:
-
datetime值真实有效(不能是占位符如XXXX-XX-XX) - 文本内容与
datetime在逻辑上一致(例如datetime="2024-03-15"对应 “3月15日”,而非 “下周三”) - 避免嵌套其他时间相关元素(如不要再在
里套)
动态生成时尤其要注意:服务端渲染需确保 datetime 是静态计算出的真实时间值;客户端 JS 注入时,务必同步设置 datetime 属性,不能只改 innerText。











