真正有效的语义化重构是从内容角色出发选择标签：标功能区域、理标题层级、识假语义class；按信息职责而非位置选标签；避开嵌套错误与冗余；最后须用DevTools、Lighthouse和屏幕阅读器三重验证。
直接用语义标签替换
不是重构，而是贴标签。真正有效的语义化重构，是从理解内容角色出发，让每个标签承担它该承担的信息职责。
先看清结构，再动代码
打开原页面，不写一行新代码，只做三件事：
- 标出所有功能区域：哪块是全站导航、哪块是文章主体、哪块是侧边推荐、哪块是版权声明
- 理清标题层级：h1是否唯一？h2是否都服务于h1？有没有h1跳到h3的断层？
- 识别“假语义”class：像可以换，但或就该保留——它们只服务样式，不表达含义
按角色选标签，不按位置套名称
别看到顶部就上
，看到左边就塞 - 全页唯一的主导航区 →
- 整页唯一的核心内容容器 →
（只能有一个，多一个屏幕阅读器就跳过后面全部） - 可独立分发的一篇博客、一条商品详情、一个用户评论 →
- 同一主题下的逻辑分组，比如“规格参数”“用户评价”“售后说明” →
（必须带 或更高阶标题，否则就是冗余）
- 与主内容相关但非必需的补充信息，如作者简介、延伸阅读、广告位 →
避开高频踩坑点
很多重构失败，不是因为没换标签，而是换错了地方或违反了隐含规则：
立即学习“前端免费学习笔记（深入）”；
不能嵌套在 或 里，也不能出现在 和 不是 的高级替代品；没有标题的建议删掉，用 更诚实- 旧代码里一堆
…，这种纯布局嵌套，直接扁平化，用CSS Grid/Flex控制，不强行加语义标签改完必须验证，不能靠肉眼
重构结束只是开始，三件事缺一不可：
- 用 Chrome DevTools 的 Accessibility 面板检查：确认role="main"只出现一次，各landmark role（navigation、complementary、contentinfo）分布合理
- 用 Lighthouse 运行无障碍审计，重点看“
is not unique”“Heading levels should only increase by one”等报错 - 打开 NVDA 或 VoiceOver，听一遍朗读顺序：是否从
→
- 旧代码里一堆
