基于语义网标准的HTML代码质量改造

作者：袖梨 2026-07-02

HTML语义化改造需确保机器可理解：time标签必须用ISO 8601格式datetime属性；article须含标题、作者、时间并标识独立性；img的alt须准确描述功能或内容；优先使用原生交互标签而非role模拟。

HTML代码质量改造不是加几个新标签就完事，关键在于让结构真正符合语义网（Semantic Web）对“机器可理解内容”的要求——浏览器、搜索引擎、屏幕阅读器和知识图谱爬虫得能一致地解析出“这是标题”“那是作者时间”“这部分是独立文章”，而不是靠猜。

用 `<time>` 替代纯文本日期，且 `datetime` 必须合法

常见错误是把日期写成 <span>2026年6月30日</span> 或 <time>2026年6月30日</time>。前者无机器可读性；后者虽用了标签，但缺失 datetime 属性，或值格式错误（如 datetime="2026/06/30"），导致 RDFa 或 JSON-LD 解析失败。

datetime 值必须是 ISO 8601 格式：年-月-日（2026-06-30），带时分秒则为 2026-06-30T15:25:00+08:00
视觉显示可保留中文格式：<time datetime="2026-06-30">2026年6月30日</time>
若日期含时区，datetime 中必须显式标注偏移（如 +08:00），不能省略

`<article>` 内必须有明确主题标识，否则退化为 `<section>`

很多页面把整篇博客正文套一层 <article> 就以为完成语义化，但语义网要求 <article> 是可独立分发、可被 RSS 订阅、可被第三方引用的内容单元。如果它没标题、没作者、没发布时间，机器无法确认其独立性。

每个 <article> 应至少包含一个 <header>，内含 <h1>–<h6> 和 <time datetime>
推荐补充微数据（Microdata）或 RDFa 属性，例如：<article itemscope itemtype="https://schema.org/BlogPosting">
若只是页面中一个普通模块（如“关于我们”介绍段），用 <section> 更准确；<section> 没有 <h2> 就不该存在

`<img>` 的 `alt` 不是“可填可不填”，而是语义网中的关键描述节点

缺 alt 的图片在语义网中等于“不可见内容”，不仅影响无障碍，还会让 Schema.org 的 ImageObject 结构化数据失效。更隐蔽的问题是：把图标按钮（如“下载 PDF”旁的 PDF 图标）设为 alt=""，等于抹掉了操作意图。

立即学习“前端免费学习笔记（深入）”；

信息型图片（图表、截图、产品图）：alt 必须描述内容本身，而非“图片”或“此处为图”
功能性图标：应描述功能，如 alt="下载PDF文件"，而非 alt="PDF图标"
装饰性图片：仅当完全无信息量时才用 alt=""，且需确认该元素未被 JS 用于交互或状态判断
若图片是链接目标（如 logo 跳转首页），alt 应说明链接目的：alt="返回首页"

避免用 `role` 强行覆盖原生语义，尤其别碰 `<button>` 和 `<input>`

有人为“统一风格”把 <button> 改成 <div role="button">，再手动加 tabindex 和键盘事件——这在语义网上是倒退：原生 <button> 自带 role="button"、内置焦点管理、表单提交行为和可访问性状态（aria-pressed 等），而 div + role 只是“假装是按钮”，机器无法验证其完整语义契约。