语义化重构的关键在于识别内容角色、守住嵌套边界、验证机器可读性；需按功能而非class名判断是否替换div，严格遵循main与article的层级关系，确保标题连续、alt和label等辅助标签完备。
直接说结论：语义化重构不是把所有 <div> 换成 <header> 就完事，关键在识别内容角色、守住嵌套边界、验证机器可读性——否则改完反而让屏幕阅读器跳错、SEO权重分散。
怎么判断一个 div 该不该换语义标签？
别看 class 名，看它实际承载什么功能。很多老代码里 <div class="nav"> 确实该换，但 <div class="clearfix"> 或 <div class="wrapper"> 就不该动。
- 能独立存在且有明确用途 → 换：
<nav>（导航链接组）、<main>（全页唯一主内容区）、<article>（可 RSS 订阅/打印的完整内容单元） - 只是为清除浮动、控制宽度或兼容旧样式 → 不换，留
<div>更诚实 - 内容没标题、也没主题聚合性 → 别硬套
<section>；<section>必须自带<h2>–<h6>，否则优先用<div>
main 和 article 嵌套时最容易踩什么坑？
<main> 是页面级容器，<article> 是内容级单元，两者逻辑不同，混用会破坏结构解析。
-
<main>全页只能出现一次，且不能包在<article>、<aside>或<nav>里面 - 博客列表页：外层用
<main>，每条博文用<article>，没问题 - 单篇博文页：整篇内容用一个
<article>，再把它放进<main>，也合规 - 错误写法：
<article><main>...</main></article>—— 浏览器和读屏软件会误判主内容归属
标题层级断层为什么比样式错更危险？
视觉上看着整齐，但 <h1> 下直接跟 <h4>，等于告诉屏幕阅读器“这里新开一章”，导致跳转错乱、SEO 权重错配。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 DevTools 的「Accessibility」面板检查 heading level 是否连续
- CMS 或 Markdown 渲染出的 HTML 容易跳级，建议构建时加
remark-lint-heading-increment校验 - 别用 CSS 把
<h3>视觉压成小字来“假装”是副标题——语义就是语义，<h3>就是<h3> - 动态插入内容时，JS 生成的标题必须继承已有层级上下文，不能无脑塞
<h1>
alt 和 label 这些小标签真不能省吗？
不是“体验优化”，是功能底线。缺 alt 的 <img> 在弱网下变空白图标，缺 <label> 的 <input> 键盘用户根本不知道要填什么。
-
alt=""只适用于纯装饰图；带操作含义的图标（如 PDF 下载按钮里的文件图标）必须写明用途 -
<label for="id">和<input id="id">必须严格配对；JS 动态生成表单时，漏设id就等于废掉label - 用
aria-label替代<label>时，得同步处理焦点逻辑，否则 Tab 键聚焦后读不出提示
重构最难的不是换标签，是改掉“写了就能跑”的惯性——得盯着 DevTools 的 Accessibility 面板、W3C 验证器、读屏软件朗读顺序三处反馈，才能确认改对了。
