article用于可独立分发的内容（如博客、新闻、评论），section用于有标题的页面内主题分组（如“参数表”“用户评价”）；误用会导致屏幕阅读器跳过、seo降权、rss抓取失败。
直接结论：语义标签不是装饰，是重写 DOM 逻辑关系的最小操作单元；用错一个 section 或 article，就可能让屏幕阅读器跳过整块内容，或让搜索引擎降权主内容。
怎么判断该用 article 还是 section
关键看内容是否「可独立分发」和「有明确主题」：
-
article必须能单独被 RSS 抓取、被分享链接、被存为 PDF —— 博客正文、新闻稿、用户评论都算；单个商品卡片若含标题+描述+价格+操作按钮，也符合 -
section是带标题的主题分组，但不独立：比如「规格参数」「用户评价」「售后服务」这些区块，必须包裹在article内部或紧邻main下，且每个都要有h2–h6 - 常见错误：
<section><article>...</article></section>—— 若这个section没标题，纯为视觉分隔，就该删掉，直接用article；若它有<h2>相关文章</h2>，那才成立
nav 和 aside 的硬性使用边界在哪
这两个标签最容易被“看起来像就用了”，但辅助技术会严格按规范解析：
-
nav只接受「主导航链接集合」：顶部菜单、页脚全站地图、移动端汉堡菜单。面包屑（<ol></ol>+aria-current）、分页（<nav aria-label="Pagination"></nav>）、文章内锚点链接（<ul class="toc"></ul>）都不属于它 -
aside必须满足「移除后不影响主内容完整性」：作者简介、术语解释、关联文档链接可以；广告位、随机推荐、登录框——一律用div，加role="complementary"都比硬套aside更诚实 - 嵌套陷阱：
aside可以出现在article内（如某段代码旁的说明），但不能作为nav的子元素；nav也不能包在section里再塞进main—— 它应是body或最近节元素的直系子元素
header 和 footer 的作用域为什么总出错
它们没有全局性，只服务「最近的节元素」（body、article、section）：
- 页面级
header放 logo 和主导航，必须是body直接子元素；文章内的header放标题+作者+时间，必须是article的第一个子元素 -
footer同理：页脚版权信息归body > footer；某篇博客末尾的「引用来源」「编辑说明」归article > footer；切勿把两者混在一个footer里 - 致命错误：
<section><header><p>纯文字介绍</p></header>...</section>——header里没标题、没 logo、没导航，就是语义断裂；要么补h2，要么换div
重构中最容易被忽略的，是验证「DOM 节点是否真正形成新大纲」：打开 Chrome 开发者工具 → Elements 面板 → 右键任意 article 或 section → “Reveal in Accessibility Tree”，看它是否生成独立节点；若没出现，大概率是嵌套错层或缺失标题。这比跑 Lighthouse 更早暴露语义失效问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
