HTML结构中Section与Article标签在内容聚合与分发中的语义界定-html教程-PHP中文网

article必须能被rss抓取或单独转发，否则就是误用；其内容须自带标题、作者、时间等元数据，满足“可独立存在、可引用、可聚合”的三可原则，否则语义失效，损害seo与无障碍访问。

html结构中section与article标签在内容聚合与分发中的语义界定

article必须能被RSS抓取或单独转发，否则就是误用

如果你的内容不会出现在RSS源里、不能被剪下来发到Twitter上让人看懂、也没有作者和时间信息，那它就不该用article。搜索引擎和阅读模式会把article当作独立内容单元处理，误用会导致主内容权重被稀释，甚至让屏幕阅读器把整页读成一堆“文章”。

常见错误现象：

电商页的「规格参数」区块被包进article → 它脱离商品页就只剩半句话
首页轮播图每张图都套article → 图片不是自包含内容，只是视觉组件
评论区只有一条评论却用article → 单条评论可以，但若页面只有它且没<header><h1></h1></header>和<time></time>，语义不完整

真正该用article的场景：

博客列表页中每篇博文都带<header><h1>标题</h1> <time datetime="2026-06-15"></time></header>
新闻聚合页的每条快讯，含来源、发布时间、可被第三方嵌入
用户评论区里的每条评论，有作者、时间、独立ID，支持被引用或邮件推送

section必须自带h1–h6标题，否则等于没写

没有标题的section在无障碍树里根本不会被识别为逻辑单元，Chrome DevTools 的 Accessibility 面板里压根不显示它。这不是建议，是语义生效的前提。

使用场景：

一篇教程内部的「安装步骤」「排错指南」「版本变更」——每个section配一个<h2></h2>
产品页的「用户评价」「售后政策」「相关推荐」——各自独立成section，且标题在section内部

容易踩的坑：

写成<section><p>这是服务介绍</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <button>立即咨询</button></section> → 没标题，语义失效，不如用div
外层<h2>安装步骤</h2>放在section外面 → 标题不属于该section，结构树断开
嵌套section共用父级标题 → 每个section必须有自己的h1–h6，层级要清晰（如外层h2，内层用h3）

嵌套关系不能反着来：section里堆article，往往说明外层选错了标签

一个section下放多个article是合理的（比如「本周热点」板块），但前提是这些article属于同一主题下的聚合；如果只是并列展示、彼此独立、无共同上下文，那外层不该是section，而应是main或div。

正确嵌套示例：

<section><h2>最新文章</h2> <article>...</article><article>...</article></section> → 合理，“最新文章”是明确主题
<article><header>...</header><section><h2>方法</h2>...</section><section><h2>结论</h2>...</section></article> → 合理，子章节服务于同一篇内容

典型误用：

<section><article>...</article></section> → 外层section多余，直接用article
<section><article>...</article><article>...</article></section>但标题是「推荐内容」→ 这个标题太泛，无法概括所有article的共性，应换更具体主题，或改用main

别为了加样式硬套语义标签，div仍是诚实的选择

当你只是为了给某块区域加margin、background-color或作为 JS 操作钩子时，div比section或article更合适。语义标签不是 div 的高级替身，而是告诉浏览器“这块内容到底算什么”的声明。

哪些情况该回退到div：

轮播图外层容器，结构由 JS 动态生成，无明确语义
CSS Grid 或 Flex 布局所需的包裹层
尚未确定语义但需要快速原型，先用div占位，后续再重构

硬套语义标签比不用更危险——尤其当团队对article和section的理解不一致时，容易导致结构混乱。先厘清内容是否真具备“独立性”或“主题聚合性”，再选标签。

真正难判断的，往往不是单个标签用法，而是整页信息架构是否支持这种嵌套。如果你不确定某个区块该用section还是article，复制那段 HTML 到空白文件里打开：能独立表达完整意思、有作者/时间/标题、别人转发也不迷糊 → 用article；脱离当前页面就只剩半句话 → 用section；既不能独立存在，又没明确主题 → 老实用div。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！