应根据功能而非class名判断div是否替换为语义标签：承载导航、主内容、独立文章等功能的需替换，仅用于布局清除浮动或兼容的保留div；main只能有一个且包裹核心内容；需同步更新css/js选择器；标题层级必须连续。
直接换 常见错误是把每个子页面、每个弹窗、甚至轮播图都包进单独的 语义标签替换本身不改变渲染，但 CSS 和 JS 很可能依赖旧选择器。重点排查三类写法：<div class="header"> 为 <code><header></header> 不会崩样式，但盲目替换所有 <div> 会让屏幕阅读器导航错乱、Lighthouse 报 landmark-roles 错误。
<h3>怎么判断一个 <code><div> 该不该换语义标签
<p>看它实际承载什么功能，不是看 class 名。很多老代码里 <code><div class="nav"> 确实该换，但 <code><div class="clearfix"> 或 <code><div class="wrap"> 就不该动。
<ul>
<li>能独立存在且有明确用途 → 换：<code><nav></nav>（导航链接组）、<main></main>（全页唯一主内容区）、<article></article>（可 RSS 订阅/打印的完整内容单元）
<div> 更诚实
<li>内容没标题、也没主题聚合性 → 别硬套 <code><section></section>；<section></section> 必须自带 <h2></h2>–<h6></h6>，否则优先用 <div>
<h3>
<code><main></main> 只能出现一次，但很多人误用
<main></main>。这会让屏幕阅读器反复播报“主内容开始”，造成导航混乱。
<main></main> 必须且只能有一个，且应直接包裹页面最核心、不可替代的内容区块（比如搜索框+结果列表、文章正文、商品详情）<main></main> 应包裹整个 tab 容器，而不是每个 tab panel 单独套一个<article></article> 或 <section></section> 里的内容，不需要再加 <main></main>——它们自身已具备内容独立性<main></main> 出现次数，超过一次就说明结构出问题了CSS 和 JS 选择器不更新，换完就失效
div.header → 改成 header，否则样式失效$(".content > div") → 改成 $(".content > section, .content > article")，或更稳妥地加回 class（如 <section class="content-item"></section>）document.querySelector('div[role="main"]') 的 JS，应同步改为 document.querySelector('main')，否则运行时报 Cannot read property 'querySelector' of null
getComputedStyle(document.querySelector("div.nav")).display，确认旧样式是否真由 <div> 驱动；如果不是，说明 class 才是关键，标签可放心换
<h3>标题层级断层比样式错更危险</h3>
<p>视觉上看着整齐，但 <code><h1></h1> 下直接跟 <h4></h4>，等于告诉屏幕阅读器“这里新开一章”，导致跳转错乱、SEO 权重错配。
- 用浏览器 DevTools 的「Accessibility」面板检查 heading level 是否连续
- CMS 或 Markdown 渲染出的 HTML 容易跳级，建议构建时加
remark-lint-heading-increment校验 - 别用 CSS 把
<h3></h3>视觉压成小字来“假装”是副标题——语义就是语义，<h3></h3>就是<h3></h3> - 动态插入内容时，JS 生成的标题必须继承已有层级上下文，不能无脑塞
<h1></h1>
最容易被忽略的是：语义化重构不是让代码“看起来更现代”，而是让机器能准确理解内容角色。一旦 <main></main> 嵌套在 <section></section> 里，或 <nav></nav> 包着面包屑，无障碍和 SEO 就已经受损了——而这种问题在视觉上完全看不出来。
