html语义化改造需确保机器可理解：time标签必须用iso 8601格式datetime属性；article须含标题、作者、时间并标识独立性；img的alt须准确描述功能或内容；优先使用原生交互标签而非role模拟。
HTML代码质量改造不是加几个新标签就完事，关键在于让结构真正符合语义网（Semantic Web）对“机器可理解内容”的要求——浏览器、搜索引擎、屏幕阅读器和知识图谱爬虫得能一致地解析出“这是标题”“那是作者时间”“这部分是独立文章”，而不是靠猜。
用 <time></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></article> 内必须有明确主题标识，否则退化为 <section></section>
很多页面把整篇博客正文套一层 <article></article> 就以为完成语义化，但语义网要求 <article></article> 是可独立分发、可被 RSS 订阅、可被第三方引用的内容单元。如果它没标题、没作者、没发布时间，机器无法确认其独立性。
- 每个
<article></article>应至少包含一个<header></header>，内含<h1></h1>–<h6></h6>和<time datetime></time> - 推荐补充微数据（Microdata）或 RDFa 属性，例如：
<article itemscope itemtype="https://schema.org/BlogPosting"></article> - 若只是页面中一个普通模块（如“关于我们”介绍段），用
<section></section>更准确；<section></section>没有<h2></h2>就不该存在
<img> 的 alt 不是“可填可不填”，而是语义网中的关键描述节点
缺 alt 的图片在语义网中等于“不可见内容”，不仅影响无障碍，还会让 Schema.org 的 ImageObject 结构化数据失效。更隐蔽的问题是：把图标按钮（如“下载 PDF”旁的 PDF 图标）设为 alt=""，等于抹掉了操作意图。
- 信息型图片（图表、截图、产品图）：
alt必须描述内容本身，而非“图片”或“此处为图” - 功能性图标：应描述功能，如
alt="下载PDF文件"，而非alt="PDF图标" - 装饰性图片：仅当完全无信息量时才用
alt=""，且需确认该元素未被 JS 用于交互或状态判断 - 若图片是链接目标（如 logo 跳转首页），
alt应说明链接目的：alt="返回首页"
避免用 role 强行覆盖原生语义，尤其别碰 <button></button> 和 <input>
有人为“统一风格”把 <button></button> 改成 <div role="button">，再手动加 <code>tabindex 和键盘事件——这在语义网上是倒退：原生 <button></button> 自带 role="button"、内置焦点管理、表单提交行为和可访问性状态（aria-pressed 等），而 div + role 只是“假装是按钮”，机器无法验证其完整语义契约。
- 所有交互控件优先用原生标签：
<button></button>、<a href></a>、<input type="checkbox"> - 若必须定制外观，用 CSS 重置样式，但保留原生标签和必要属性（如
type="button"防止意外提交） -
role仅用于填补 HTML 标签能力空白（如<dialog></dialog>兼容性不足时用role="dialog"），不是语义兜底方案
语义网改造最难的部分，往往不在标签替换，而在确认每个 <time></time> 是否真能被解析、每个 <article></article> 是否真能被独立抓取、每个 alt 是否真能还原上下文——这些细节不校验，语义就停留在表面。
