应使用标记可独立传播的完整信息单元，如博客正文、论坛帖子、新闻报道、用户评论；而仅用于页面内部逻辑分段，如产品页功能模块、长文小节、首页区域等。
关键看内容能不能“拎出去单独用”：能被 RSS 订阅、转发到其他平台、或单独链接分享的，就该用 <article></article>；只是为组织页面结构而划分的主题区块，就用 <section></section>。
什么内容必须用 article
<article></article> 不是“有标题的内容块”，而是自带传播力的完整信息单元。满足以下任一条件，就该用它：
- 一篇博客正文，哪怕只有一段话，只要它有独立标题、作者、时间，就能被聚合到 RSS 或第三方平台
- 论坛里的一条帖子，可被单独回复、引用、收藏
- 新闻网站的每条报道，有独立 URL 和发布时间，搜索引擎会把它当一个实体索引
- 用户评论区里的每条评论，可被点赞、转发、@ 回复，具备社交粒度
什么场景适合用 section
<section></section> 是文档内部的逻辑分段，不追求对外传播，只服务于当前页面的信息组织：
- 产品页里的“核心功能”“技术参数”“客户评价”三个板块，各自主题明确但不能脱离页面独立存在
- 一篇长文章内部的“背景”“分析”“结论”小节，它们共同构成完整论述
- 网站首页的“欢迎介绍”“最新动态”“联系方式”区域，是整站结构的一部分，不是可分发内容
- 仪表盘中“今日数据概览”“用户活跃趋势”“异常告警列表”，属于界面功能分区，无独立语义
嵌套关系要理清
<article></article> 内部可以放心用 <section></section> 划分小节，这是标准推荐做法；反过来则不合理：
- ✅ 正确：
<article><header><h2>标题</h2></header><section><h3>第一部分</h3> <p>…</p></section></article> - ❌ 错误：把整页导航栏、页脚、侧边栏包装成
<section></section>—— 它们有更精准的语义标签（<nav></nav>、<footer></footer>、<aside></aside>） - ❌ 错误：在
<section></section>里放一堆无关联的卡片，比如“热门标签”列表中的每个标签项 —— 标签本身不是独立内容，不该套<article></article>
判断时的一个实用技巧
写完一个区块，试着问自己：如果把这个区块复制出来，发到微信群或贴到 Twitter 上，别人不看上下文，能不能立刻理解它在说什么？
- 能看懂 → 大概率是
<article></article> - 看不懂，必须依赖前后文 → 应该是
<section></section>或其他结构标签
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
