判断div是否该替换需先明确内容角色：header/nav/main/aside等有固定功能的必须换，article与section依内容独立性与主题性区分，无语义的布局或交互容器仍用div。
直接替换 div 不等于语义化，错用 section 或滥用 main 会比原来更糟——重构必须先理清内容角色，再动标签。
怎么判断一个 div 该不该换？
不是所有 div 都要删，关键看它包裹的内容有没有明确功能角色。比如：
-
div class="header"→ 必须换为header，因为它是页面顶部功能区 -
div class="nav"→ 换成nav，但得确认里面全是链接；如果混着搜索框或登录按钮，就得拆开，导航部分用nav，其余保留div或用form/aside -
div id="content"→ 只要它是整页唯一主内容容器，就该换成main；但如果它嵌在某个article里，或者被nav包着，那它就不合法，得先调整结构 -
div class="sidebar"→ 若内容是“相关文章”“作者简介”，用aside；若是纯广告位、第三方推荐，反而该保留div，加role="complementary"更稳妥
section 和 article 到底谁套谁？
混淆这两个标签是最常见的语义断裂点。它们不是按视觉区块分的，而是按内容独立性判的：
-
article必须能单独存在：RSS 订阅、打印、转发、被搜索引擎当独立结果索引 —— 比如一篇博客、一条新闻、一个用户评论 -
section是主题性分组：不能脱离上下文独立存在，比如“安装步骤”“常见问题”“技术参数”，且每个section应带h2–h6标题 - 反例：
section里只包一个p，或article里塞一堆无标题的section，都是信号：结构没想清楚 - 正确嵌套：一个
article内可以有多个section（如“背景”“实现”“测试”），但section里不能包多个article—— 那说明你漏掉了外层main或section的主体定位
标题层级和 main 标签为什么总出错？
这两处错误不会让页面立刻崩，但会让屏幕阅读器跳读失败、SEO 权重分散、后续 JS 逻辑依赖 DOM 结构时意外失效：
立即学习“前端免费学习笔记（深入）”；
-
main必须全页唯一，且不能嵌套在article、aside、nav或另一个main里；如果 CMS 输出多个main，得在模板层统一过滤 - 标题跳级（
h1→h3）不是样式问题，是语义断层；浏览器会把h3当作新章节起点，可能跳过中间逻辑 - 动态渲染内容时，JS 插入的标题常忽略已有层级；建议用 DevTools 的「Accessibility」面板实时检查 heading level 是否连续
- 别用 CSS 把
h2视觉降级成小字就当h3用——语义层级和视觉样式必须分离
重构后样式崩了怎么办？
语义标签本身不带样式，但旧 CSS 很可能依赖 div.class 这类选择器。改完标签后，样式丢失是常态，不是 bug：
- 优先检查 CSS 里有没有写死
div.nav、div#footer这类选择器；改成nav、footer即可 - 如果用了 BEM 命名（如
.header__logo），类名没变，样式通常不受影响 - 避免为了兼容旧样式，给新语义标签硬加无意义 class（如
<main class="content"></main>）——这等于用语义标签包着 div 思维 - 真正难处理的是那些靠父级
div定位的绝对定位元素；这时得补一层 wrapperdiv，但要加注释说明：“仅用于定位，无语义”
最容易被忽略的不是换标签的动作，而是换之前没问清楚：这块内容到底是谁？它能不能自己活？它在整个信息流里站在哪一级？没答完这三个问题就动手，重构只是把混乱从 class 名挪到了标签名上。
