语义化重构的关键是结构映射而非简单标签替换；需依class名、上下文及ARIA属性判断div去留，确保<main>唯一、标题层级合规，并同步更新CSS与无障碍测试。
直接说结论：语义化重构不是换几个标签就完事，关键在「结构映射」——让每个标签真正承载它该负责的内容类型。换错标签比不用还糟。
怎么判断哪些 div 该换、哪些该留？
别一上来就全局搜索 div 替换。先看 class 名和上下文：
- 如果
class="header"或id="nav"出现在顶层容器里，大概率对应<header>或<nav> -
class="article"、class="post"、class="blog-entry"这类命名，基本就是<article>的信号 - 纯布局用途的
div（比如网格容器、flex 包裹层、为了 margin/padding 加的空 div），没内容语义，保留div更干净 - 带
role="navigation"或aria-label="main navigation"的div，说明开发者已经意识到语义缺失——直接换成<nav>，删掉冗余属性
<main> 只能有一个，但实际页面常有多个“主要内容”怎么办？
这是最容易踩的坑：<main> 在整个文档中必须唯一，它代表的是「当前视图的主体内容」，不是「所有重要区块」。
- 单页应用（SPA）里，路由切换时要确保每次只渲染一个
<main>，旧的得移除或隐藏（用hidden而非display: none，避免屏幕阅读器跳过） - 首页有轮播、产品列表、推荐文章三个区块？它们不是并列的
<main>，而是用<section>划分，整体包进一个<main> - 嵌套
<main>会触发浏览器警告，部分辅助技术会忽略内层内容
标题层级（h1–h6）和语义标签怎么协同？
光用 <article> 不等于有语义，标题才是内容骨架。常见断裂点：
立即学习“前端免费学习笔记（深入）”；
-
<article>里没<h1>或<h2>—— 它就只是个“盒子”，搜索引擎无法识别这是独立内容单元 - 页面有多个
<article>，每个都用<h1>—— 违反层级逻辑，应统一用<h2>（主页面<h1>已被<header>占用） -
<section>没配标题 —— 它本质是“有主题的区块”，没<h2>–<h6>就失去语义锚点，建议加<h2>或用aria-labelledby
CSS 选择器和无障碍测试怎么不翻车？
重构后样式崩了、屏幕阅读器读错顺序，往往不是标签问题，是配套没跟上：
- 原 CSS 写的是
div.nav ul，换成<nav>后得同步改成nav ul；若用属性选择器（如[class*="nav"]）可暂时兼容，但建议清理 -
<aside>默认不改变阅读顺序，但如果放在 DOM 前面（比如写在<main>上方），屏幕阅读器仍会先读它——把<aside>放到<main>后面，或加aria-hidden="true"（仅当它纯装饰性时） - 用 W3C Validator 验证 HTML 结构，重点看
error: Duplicate ID和warning: Section lacks heading
最常被忽略的一点：语义化不是终点，而是起点。改完标签后，得用 VoiceOver 或 NVDA 实际听一遍导航流，再用 Lighthouse 跑一次 SEO 和无障碍审计——机器不会骗人，人容易自我感觉良好。
