必须用标签并严格设置ISO 8601格式的datetime属性,如2023年5月12日;仅文本或错误格式(如斜杠、中文)会使语义失效。

HTML里怎么写作品创作时间才规范
用 <time></time> 标签,不是 <span></span> 也不是 <div>。它专为时间语义设计,搜索引擎、屏幕阅读器和未来工具能识别出“这是日期”,而不是一堆数字。<p>常见错误是直接写 <code><span>2023年5月</span>——机器看不懂这是时间,也做不了排序、聚合或日历联动。
-
<time datetime="2023-05">2023年5月</time>:适合年月,datetime值必须是机器可解析格式(ISO 8601),显示文本可本地化 -
<time datetime="2023-05-12">2023年5月12日</time>:完整日期,datetime不能写成"2023/05/12"或"12-05-2023",否则无效 - 不写
datetime属性时,浏览器会尝试从内容里猜,但极不可靠,比如<time>去年冬天</time>完全没意义
年份时间轴布局用什么结构最稳妥
别用 <table> 模拟时间轴,也别靠绝对定位硬堆。语义清晰 + CSS 灵活控制才是正解:用带 <code><time></time> 的 <article></article> 或 <section></section> 套列表项,再用 CSS Grid 或 Flex 实现横向/纵向时间线。
关键点在于:时间信息必须在每个条目内部,不能抽到外层统一管理——否则无法支持多时间点、响应式折叠或无障碍导航。
- 每个事件用
<article></article>包裹,内部放<time datetime="2021-03">2021年3月</time>和描述 - 避免用
id="year-2021"这类纯展示性 ID,改用data-year="2021"便于 JS 筛选,且不污染语义 - 横向时间轴慎用
white-space: nowrap+ 滚动容器,小屏下容易触发意外横向溢出,优先考虑垂直堆叠+年份分组
datetime属性填错会导致什么实际问题
填错 datetime 不会报错,页面照常显示,但后果隐蔽且严重:SEO 丢失时间权重、RSS 聚合失败、浏览器「阅读模式」可能过滤掉整段、iOS Safari 的分享卡片不显示时间。
最典型错误是混用中文标点或口语表达:
- ❌
<time datetime="2023年5月">2023年5月</time>(含中文字符,非法) - ❌
<time datetime="May 2023">2023年5月</time>(非 ISO 格式,被忽略) - ✅
<time datetime="2023-05">2023年5月</time>(合法,代表2023年5月任意一天) - ✅
<time datetime="2023-05-12T14:30">2023年5月12日下午2:30</time>(带时分,注意用T分隔日期与时间)
要不要用 schema.org 微数据补充时间信息
要,但只在需要强机器可读场景下加,比如作品集首页、新闻稿、学术成果页。普通博客正文加了反而增加维护成本,且多数 CMS 不自动同步 <time></time> 和微数据。
重点不是“有没有”,而是“是否一致”。如果用了 schema.org/CreativeWork,其中的 dateCreated 必须和页面内最近一个 <time></time> 的 datetime 值完全一致,否则结构化数据校验失败。
- 用
<meta itemprop="dateCreated" content="2023-05-12">放在或对应<article></article>内,不要手写两次 - 别为了加而加:Google 已明确表示,单纯加微数据但页面无对应可见
<time></time>,会被视为误导性标记 - 验证工具推荐:Google Rich Results Test,输入 URL 后看「DatePublished」字段是否提取成功
事情说清了就结束











