该用 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 不会报错,但连续十次之后,结构就再难理清了。











