必须优先替换的 div 是：①class为"header""nav""main""footer""sidebar"的，直接换语义标签；②包裹独立内容且含h2/h3的，换<article>；③仅含广告/作者简介等辅助内容且与主内容逻辑关联的，换<aside>。
直接替换带语义暗示的 class 名 div，但必须按内容角色判断，不是所有 div 都该换。
哪些 div 必须优先换？
别通读全文，先用浏览器 DevTools 搜索三类 class 名，它们是语义化重构最明确的入口：
-
div的class是"header"、"nav"、"main"、"footer"、"sidebar"—— 这些几乎 100% 可直接换成对应语义标签，删掉 class - 包裹整段独立内容（如一篇商品详情、一条用户评论）且内部有
<h2>或<h3>的div—— 优先考虑换成<article>，不是<section> - 只放广告、作者简介、相关推荐这类“删掉也不影响主干”的
div—— 对应<aside>，但注意它必须和主内容有逻辑关联，纯广告位慎用
<main> 出现多次就是结构错误
常见错误是把每个 tab panel、弹窗、轮播图都包进单独的 <main>。这会让屏幕阅读器反复播报“主内容开始”，导航混乱。
- 一个 HTML 文档中，
<main>必须且只能出现一次 - 它应直接包裹页面最核心、不可替代的内容（比如搜索框+结果列表、文章正文、商品详情页主体）
- 多 tab 页面（如“参数/评价/售后”）要把整个 tab 容器包进一个
<main>，而不是每个 tab 单独套一个 - 嵌套在
<article>或<section>里的内容，不能再加<main>
<section> 不是 div 的高级替代品
很多团队误以为“换掉 div 就是进步”，结果把所有布局容器都塞进 <section>，反而稀释语义。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<section>必须有明确主题，且自带标题（<h2>–<h6>），例如“用户评价”“技术参数”“服务流程” - 仅用于清除浮动、控制宽度、兼容旧样式或纯 CSS 布局的
div（如class="clearfix"、class="wrapper"）—— 留<div>更诚实 - 没有标题的区块，即使视觉上是独立模块，也别硬套
<section>；可用<div role="region" aria-labelledby="xxx">补充语义
CSS 选择器和无障碍验证不能漏
重构后样式崩了、JS 找不到元素、屏幕阅读器朗读错序——这些问题往往出在迁移细节上。
- 原 CSS 若写的是
div.nav或div#content，需同步改为nav或main；若用 class（如.nav）则不受影响 - 用浏览器 DevTools 的“Accessibility”面板检查
<main>数量、标题层级是否跳级（<h1>后直接<h3>）、<img>是否缺alt - W3C Validator 能抓出嵌套错误（如
<main>在<article>内）、<section>缺标题等硬性规范问题
真正难的不是换标签，而是每次写新 <div> 前，下意识问一句：它承载的是什么角色？如果答不出，就先别动。
