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

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 只是“假装是按钮”，机器无法验证其完整语义契约。

• 所有交互控件优先用原生标签：<button>、<a href>、<input type="checkbox">
• 若必须定制外观，用 CSS 重置样式，但保留原生标签和必要属性（如 type="button" 防止意外提交）
• role 仅用于填补 HTML 标签能力空白（如 <dialog> 兼容性不足时用 role="dialog"），不是语义兜底方案

语义网改造最难的部分，往往不在标签替换，而在确认每个 <time> 是否真能被解析、每个 <article> 是否真能被独立抓取、每个 alt 是否真能还原上下文——这些细节不校验，语义就停留在表面。