判断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 到底谁套谁？

混淆这两个标签是最常见的语义断裂点。它们不是按视觉区块分的，而是按内容独立性判的：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 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 定位的绝对定位元素；这时得补一层 wrapper div，但要加注释说明：“仅用于定位，无语义”

最容易被忽略的不是换标签的动作，而是换之前没问清楚：这块内容到底是谁？它能不能自己活？它在整个信息流里站在哪一级？没答完这三个问题就动手，重构只是把混乱从 class 名挪到了标签名上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！