识别内容角色是关键，必须换：导航链接组→nav、页眉内容→header、唯一主内容→main、独立文章→article、侧边补充信息→aside；必须留：纯布局或JS容器div；错用section/article/main会致读屏混乱、SEO降权、标题层级断裂。

直接替换不是目的，识别内容角色才是关键动作；盲目把所有 div 换成 header 或 section 反而破坏结构可读性。

哪些 div 必须立刻换，哪些必须留着不动

别看 class 名，看它实际干了什么：

• div 包裹整页导航链接组 → 换成 nav，并加 aria-label="主导航"
• div 里只有 logo + 搜索框 + 主菜单 → 换成 header，内部再嵌 nav
• div id="content" 或 div class="main" 包着文章正文/商品详情/搜索结果 → 换成 main，且全页只能有一个
• div class="post" 或 div class="news-item" 有独立标题、可被 RSS 抓取 → 换成 article
• div class="sidebar" 放广告、相关推荐、作者简介 → 换成 aside
• div class="clearfix"、div class="wrapper"、div style="display:flex" → 别动，这是布局容器，div 就是最诚实的选择

section 和 article 混用会触发什么实际问题

搜索引擎和屏幕阅读器会误判内容权重与独立性：

• 把一篇博客正文包在 section 里 → 读屏软件不认为它是可订阅/可打印的独立单元，跳转逻辑错乱
• 把“用户评价”区块写成 article → 搜索引擎可能单独索引这条评价，导致重复内容或权重分散
• section 没带 h2–h6 标题 → 浏览器 DevTools 的 Accessibility 面板直接标红，语义退化为普通 div
• article 套 section 合规（如博客内分“背景”“方法”“结论”），但反过来绝对不行

main 出现多次时，键盘用户和爬虫怎么“崩溃”的

这不是样式问题，是解析层故障：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 屏幕阅读器每遇到一个 main 就播报“主内容开始”，用户 Tab 导航时反复中断上下文
• SEO 工具（如 Lighthouse）直接扣分，提示“Multiple main elements found”
• 多 tab 页面（如“参数/评价/售后”）错误地给每个 tab panel 套 main → 实际应只在外层容器套一次
• 动态插入内容时 JS 生成新 main → 必须检查并移除旧的，否则 DOM 中残留多个

标题层级断裂比样式错更危险的实操表现

视觉上一切正常，但机器完全读不懂结构：

• h1 下直接跟 h4 → 屏幕阅读器跳过 h2 和 h3 级别，用户无法按 heading 快速定位子章节
• JS 渲染的卡片列表里每张卡都塞 h2 → 搜索引擎以为页面有几十个二级主题，稀释主内容权重
• 用 CSS 把 h3 视觉压成小字“假装”是副标题 → 语义仍是 h3，辅助技术照读不误
• 构建流程中没加 remark-lint-heading-increment 校验 → Markdown 转 HTML 后标题跳级静默发生

最常被忽略的是：语义标签不是“套上就完事”，main 的唯一性、section 的标题强制性、article 的可分发性，这三件事必须在每次替换前确认，而不是靠肉眼扫一遍 class 名。