必须优先替换的 div 是：①class为"header""nav""main""footer""sidebar"的，直接换语义标签；②包裹独立内容且含h2/h3的，换；③仅含广告/作者简介等辅助内容且与主内容逻辑关联的，换。

直接替换带语义暗示的 class 名 div，但必须按内容角色判断，不是所有 div 都该换。

哪些 div 必须优先换？

别通读全文，先用浏览器 DevTools 搜索三类 class 名，它们是语义化重构最明确的入口：

• div 的 class 是 "header"、"nav"、"main"、"footer"、"sidebar" —— 这些几乎 100% 可直接换成对应语义标签，删掉 class
• 包裹整段独立内容（如一篇商品详情、一条用户评论）且内部有 <h2></h2> 或 <h3></h3> 的 div —— 优先考虑换成 <article></article>，不是 <section></section>
• 只放广告、作者简介、相关推荐这类“删掉也不影响主干”的 div —— 对应 <aside></aside>，但注意它必须和主内容有逻辑关联，纯广告位慎用

<main></main> 出现多次就是结构错误

常见错误是把每个 tab panel、弹窗、轮播图都包进单独的 <main></main>。这会让屏幕阅读器反复播报“主内容开始”，导航混乱。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 一个 HTML 文档中，<main></main> 必须且只能出现一次
• 它应直接包裹页面最核心、不可替代的内容（比如搜索框+结果列表、文章正文、商品详情页主体）
• 多 tab 页面（如“参数/评价/售后”）要把整个 tab 容器包进一个 <main></main>，而不是每个 tab 单独套一个
• 嵌套在 <article></article> 或 <section></section> 里的内容，不能再加 <main></main>

<section></section> 不是 div 的高级替代品

很多团队误以为“换掉 div 就是进步”，结果把所有布局容器都塞进 <section></section>，反而稀释语义。

• <section></section> 必须有明确主题，且自带标题（<h2></h2>–<h6></h6>），例如“用户评价”“技术参数”“服务流程”
• 仅用于清除浮动、控制宽度、兼容旧样式或纯 CSS 布局的 div（如 class="clearfix"、class="wrapper"）—— 留 <div> 更诚实 <li>没有标题的区块，即使视觉上是独立模块，也别硬套 <code><section></section>；可用 <div role="region" aria-labelledby="xxx"> 补充语义 <h3>CSS 选择器和无障碍验证不能漏</h3> <p>重构后样式崩了、JS 找不到元素、屏幕阅读器朗读错序——这些问题往往出在迁移细节上。</p> <ul> <li>原 CSS 若写的是 <code>div.nav 或 div#content，需同步改为 nav 或 main；若用 class（如 .nav）则不受影响
• 用浏览器 DevTools 的“Accessibility”面板检查 <main></main> 数量、标题层级是否跳级（<h1></h1> 后直接 <h3></h3>）、<img> 是否缺 alt
• W3C Validator 能抓出嵌套错误（如 <main></main> 在 <article></article> 内）、<section></section> 缺标题等硬性规范问题

真正难的不是换标签，而是每次写新 <div> 前，下意识问一句：它承载的是什么角色？如果答不出，就先别动。</div>