该用 article 当内容可独立分发或理解，如博客正文、新闻稿；section 用于依赖上下文的主题分组，如“关于我们”区块；二者可合理嵌套，article 内用 section 划分小节，section 内用多个 article 并列独立内容。
什么时候该用 article，而不是 section
当一块内容能被单独拿出来发 RSS、被搜索引擎当一篇独立文章索引、或复制粘贴到别处仍能看懂——就该用 article。
- 博客正文、新闻稿、论坛主帖、用户评论（带作者+时间+正文）都算
- 产品卡片如果含图、标题、价格、短描述，且设计上支持独立展示（比如在弹窗或侧边栏复用），也适合
article - 误用典型：把“热门标签”列表里的每个
span包一层article——标签本身不是内容单元，只是元数据 -
article不要求一定有标题，但要有自足的信息闭环；没作者、没上下文就看不懂的内容，别硬套
什么时候只能用 section，不能用 article
section 是组织性容器，不是内容单元。它存在的意义是“这里是一组有关联的主题内容”，但拆出来就残缺。
- 页面里的“关于我们”“服务流程”“客户案例”区块，各自依赖整页语境，用
section - 一篇长博客内部的“背景”“方法论”“实测结果”小节，用
section划分很自然 - 导航栏、页脚、侧边栏——这些有明确语义的区域，优先用
nav、footer、aside，而不是退化成section - 常见错误：给整个首页内容包一个
section当“根容器”——html5 没有“页面根区块”的语义标签，直接用main或留空更合适
article 和 section 能互相嵌套吗？怎么嵌才合理
能嵌，而且常见；关键是嵌套方向要符合语义流向：大内容单元里分小主题，或小主题下聚合多个独立单元。
-
article内部用section：比如一篇技术教程，分成“环境准备”“代码实现”“踩坑记录”几个section——合理 -
section内部用多个article：比如“最新动态”板块里并列三条新闻，每条都是完整article——合理 - 反例：在
article里再套一个语义模糊的section，却不加标题或不表达主题分层——等于白用，还增加 dom 层级 - 注意：嵌套不改变可访问性层级；屏幕阅读器会按结构播报，别指望靠嵌套“隐藏”语义
不用语义标签会出什么实际问题
短期看不出，长期会影响 seo 收录粒度、无障碍设备理解逻辑、团队协作时的结构共识。
立即学习“前端免费学习笔记（深入）”；
- SEO：Google 明确将
article作为“独立内容信号”，用错可能让单篇博文无法被单独收录为搜索结果 - 无障碍：NVDA 或 VoiceOver 会把
article当作可跳转的“文章单元”，而section只是普通区域；混用会让视障用户迷失内容主次 - 维护成本：用一堆
div+ class 模拟结构，后期改版时无法通过标签快速定位内容类型，CSS 和 js 选择器也容易失控 - 兼容性无风险：所有现代浏览器对这两个标签的解析完全一致，不存在渲染差异
语义不是装饰，是浏览器、爬虫、读屏器和下一个接手你代码的人，共同依赖的最小契约。写错一次 article 不会报错，但连续十次之后，结构就再难理清了。