应依据实际功能而非class名更换语义标签；仅当区域承担明确内容角色、需屏幕阅读器识别或依赖seo/浏览器功能时才替换；main全页唯一且不可嵌套于其他语义元素内。
怎么判断一个该不该立刻换语义标签
别看 class 名，看它实际干的活。很多项目里 div class="header" 或 div id="nav" 就是现成的替换入口；但 div class="clearfix"、div class="container" 这类纯为样式或兼容性存在的，硬换反而破坏语义诚实性。
满足以下任一条件才值得动：
- 该区域在页面中承担明确内容角色（如主导航、页脚、主内容区）
- 屏幕阅读器需识别其功能（例如
main 是唯一主内容区）
- SEO 或浏览器内置功能（如打印样式、大纲生成）依赖结构语义
反例：div class="card" 不需要改成 article，除非它真是一条可独立分发、带标题+正文+操作的完整内容单元（比如商品卡片含“iPhone 16｜¥7,999｜立即购买”）。
main 和 article 嵌套时最常踩的三个坑
main 是页面级容器，article 是内容级单元，混用会直接让辅助技术解析错乱。
-
main 全页只能出现一次，且不能包在 section、article 或 nav 里面
- 博客列表页：外层用
main，每条博文用 article，没问题；单篇页：整篇内容用一个 article，再把它放进 main，也合规
- 错误写法：
<main><article></article></main> —— 浏览器和读屏软件会误判主内容归属，以为 article 是“主内容里的子内容”
DevTools 里右键检查 main 出现次数，超过一次就说明结构已出问题。
section 和 aside 的使用边界在哪
section 不是视觉分隔符，必须自带 h2–h6 标题且有明确主题（如“用户评价”“技术参数”）；aside 更严：移除后不能影响主内容完整性。
- 作者简介、术语解释、关联文档链接 → 合规
aside
- 广告位、随机推荐、登录框 → 必须用
div，加 role="complementary" 都比硬套 aside 更诚实
-
aside 可以出现在 article 内（如代码示例旁的说明），但不能作为 nav 的子元素
常见错误：<section><header><p>纯文字介绍</p></header></section> —— header 里没标题、没 logo、没导航，就是语义断裂；要么补 h2，要么换 div。
重构后怎么验证是否真生效了
改完不验证，等于没改。重点不是“标签换了”，而是“DOM 节点是否真正形成新大纲”。
- Chrome DevTools → Elements 面板 → 右键任意
article 或 section → “Reveal in Accessibility Tree”，看是否被识别为独立节元素
- 用屏幕阅读器（如 NVDA + Firefox）按
H 键跳标题，确认层级连续（h1→h2→h3，不跳级）
- 检查
img 是否都带 alt，input 是否都有配对的 label for="id"；缺 label 的表单，键盘用户根本不知道填什么
最容易被忽略的是动态插入内容：JS 渲染的标题必须继承已有层级上下文，不能无脑塞 h1；CMS 输出的 HTML 若跳级，得在构建阶段加 remark-lint-heading-increment 校验。
别看 class 名，看它实际干的活。很多项目里 div class="header" 或 div id="nav" 就是现成的替换入口；但 div class="clearfix"、div class="container" 这类纯为样式或兼容性存在的，硬换反而破坏语义诚实性。
满足以下任一条件才值得动：
- 该区域在页面中承担明确内容角色（如主导航、页脚、主内容区）
- 屏幕阅读器需识别其功能（例如
main是唯一主内容区） - SEO 或浏览器内置功能（如打印样式、大纲生成）依赖结构语义
反例：div class="card" 不需要改成 article，除非它真是一条可独立分发、带标题+正文+操作的完整内容单元（比如商品卡片含“iPhone 16｜¥7,999｜立即购买”）。
main 和 article 嵌套时最常踩的三个坑
main 是页面级容器，article 是内容级单元，混用会直接让辅助技术解析错乱。
-
main全页只能出现一次，且不能包在section、article或nav里面 - 博客列表页：外层用
main，每条博文用article，没问题；单篇页：整篇内容用一个article，再把它放进main，也合规 - 错误写法：
<main><article></article></main>—— 浏览器和读屏软件会误判主内容归属，以为article是“主内容里的子内容”
DevTools 里右键检查 main 出现次数，超过一次就说明结构已出问题。
section 和 aside 的使用边界在哪
section 不是视觉分隔符，必须自带 h2–h6 标题且有明确主题（如“用户评价”“技术参数”）；aside 更严：移除后不能影响主内容完整性。
- 作者简介、术语解释、关联文档链接 → 合规
aside - 广告位、随机推荐、登录框 → 必须用
div，加role="complementary"都比硬套aside更诚实 -
aside可以出现在article内（如代码示例旁的说明），但不能作为nav的子元素
常见错误：<section><header><p>纯文字介绍</p></header></section> —— header 里没标题、没 logo、没导航，就是语义断裂；要么补 h2，要么换 div。
重构后怎么验证是否真生效了
改完不验证，等于没改。重点不是“标签换了”，而是“DOM 节点是否真正形成新大纲”。
- Chrome DevTools → Elements 面板 → 右键任意
article或section→ “Reveal in Accessibility Tree”，看是否被识别为独立节元素 - 用屏幕阅读器（如 NVDA + Firefox）按
H键跳标题，确认层级连续（h1→h2→h3，不跳级） - 检查
img是否都带alt，input是否都有配对的label for="id"；缺label的表单，键盘用户根本不知道填什么
最容易被忽略的是动态插入内容：JS 渲染的标题必须继承已有层级上下文，不能无脑塞 h1；CMS 输出的 HTML 若跳级，得在构建阶段加 remark-lint-heading-increment 校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
