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