语义化改造应分步聚焦验证闭环：先识别高价值低风险节点（如class="header"→），避开纯样式div；检查DOM顺序与无障碍焦点流；确保CSS/JS适配新标签；最后用Lighthouse、屏幕阅读器、禁用CSS三重验证。
语义化改造不是为了换标签而换，而是让 HTML 结构真正反映内容意图，从而带动可访问性、SEO 和团队协作质量的提升。老旧项目动不得、不敢动，关键在于分步、聚焦、验证闭环。
先识别高价值、低风险的改造点
别一上来就全局搜索替换 div。打开开发者工具控制台，执行这行代码：
document.querySelectorAll("div").length / document.querySelectorAll("*").length如果结果超过 0.6，说明 div 泛滥，但真正该优先动的是那些仅靠 class 命名传递语义的节点，比如：
-
class="header"→ 可直接换成<header></header> -
class="main-content"或class="article-list"→ 对应<main></main>或<section></section>/<article></article> -
class="footer"、class="nav"、class="sidebar"—— 这些都是明确信号
而 class="wrap"、class="clearfix"、class="box" 这类纯样式用途的 div 暂不处理，避免引入冗余改动。
立即学习“前端免费学习笔记（深入）”；
聚焦无障碍与 DOM 结构合理性
按 Tab 键测试焦点流：如果焦点从页脚跳回导航栏，或在内容区中间“断层”，说明视觉顺序和 DOM 顺序严重错位。这类区块必须优先重构，否则 Lighthouse 的无障碍审计必然失败。
重点检查三类结构问题：
-
<main></main>被包在<div> 或 <code><section></section>里 —— 属于无效嵌套，会触发 landmark-roles 错误 -
<nav></nav>里塞了面包屑、分页链接或版权信息 —— 它只承载主导航意图，混入其他语义会干扰屏幕阅读器的 N 快捷键行为 - 多个
<h1></h1>并存，或标题层级跳级（如h1直接到h3）—— 影响内容可读性与 SEO 权重分配 - CSS 中的
div.header→ 改为header，或保留 class 同时加标签（header.header） - JS 中用
$('div.content > div')遍历子项 → 改为$('div.content > section, div.content > article')，或统一加 class 回退 - 用
document.querySelector('div[role="main"]')获取主区域 → 应同步改为document.querySelector('main') - 用 Lighthouse 运行无障碍审计，重点关注 “landmark”、“heading-levels”、“focus-order” 项
- 开启系统级屏幕阅读器（如 NVDA 或 VoiceOver），听一遍页面朗读顺序是否符合预期
- 禁用 CSS 后查看纯文本结构 —— 是否仍能清晰分辨 header、nav、main、footer 等区域
确保 CSS 和 JS 不断裂
语义标签本身不改变渲染，但样式和脚本常依赖旧选择器。重点排查以下三类写法：
建议先在控制台运行 getComputedStyle(document.querySelector("div.nav")).display，确认样式是否真由标签驱动；若返回 block 且无额外 class 样式覆盖，说明 class 才是关键，标签可放心替换。
验证闭环：机器可读 + 人工可感
改完不是终点，必须验证三件事：
只要这三个维度都通过，说明语义结构已真正落地，不只是表面换标签。
